全体に背景画像

Bブログ

2019/06/19

細かい事が気にならん性格でも、このカテゴリーの違和感はわかるわ!
ですよね〜〜〜。
こんな風に全体の背景を画像にすることも可能だというサンプルです。
但し、かなーり淡い画像にしないと見辛くなります。

スタイルシート

『style.css』の以下の部分を書き換えます。

でもその前に、いつでも元に戻せるように複製の『style.css のコピー』を作成しておきます。


CSS記述

background:url(images/wrapper_bg.png) repeat;

『全体>wrapper』で使うので、『wrapper_bg.png』という画像名にしましたが名前は自分がわかりやすいものでOKです。用意した背景画像は『images』フォルダにアップします。

background:#fff;』の『#fff』が色のコード番号です。マーカー部分は fff(白) や 000(黒) のように略して使えるものもありますが、通常は6桁です。
画像ではなく、色を変更する時は『#色のコード6桁』として下さい。

ここで疑問が残りますよね。なんでこのサイトはこのカテゴリーだけ背景画像付きなのか?
種明かしすると、このカテゴリーだけ別のスタイルシート『style2.css』を使用しています。

複製の『style.css のコピー』があるので安心して『style.css』を色々つつきまくって変更しました。
完成した『style.css』を『style2.css』という名前に変えて、複製の『style.css のコピー』を『style.css』に戻します。
これで、今までのHTMLは全部元のままに戻りました。

そして、『style2.css』を使いたいHTMLだけ『2』を追加しました。^^v

と、ここまでは『ローカル』での作業です。
サーバーもFTP転送アプリも使わずに、自分のPC内だけで動作確認をしています。
そして、完成したらFTP転送します。

WordPressでも、テーマ(テンプレート)を切り替えて使えるそうですが、わたしは上手く使いこなせません。^^;
一方、静的HTMLサイトでは、今回ご紹介したように簡単に切り替えが出来るというお話でした。

TOP


Copyright © TM_BB. All Rights Reserved. Design by https://f-tpl.com