2019/06/19
このサイトで言えば、本体部分の左右のピンクのチェック柄部分です。
グレーでは味気ないので画像背景にしてみました。
シームレス(繰り返しても上下左右繋がる)な画像をご用意下さい。
本体の外側の背景変更
テンプレート ＞
スタイルシート
ローカル環境(PCのフォルダ内だけで試用する)で確認しながら作業するので、『style.css』を複製して『style.css のコピー』をサイト用のフォルダ内に作成しておきます。
使うのは『style.css』です。
『style.css』の以下の部分を書き換えます。
CSS記述
background:url(images/body_bg.png) repeat;『body』で使うので、『body_bg.png』という画像名にしましたが名前は自分がわかりやすいものでOKです。用意した背景画像は『images』フォルダにアップします。
『background:#f1f1f1;』の『#f1f1f1』が色のコード番号です。マーカー部分は fff(白) や 000(黒) のように略して使えるものもありますが、通常は６桁です。
画像ではなく、色を変更する時は『#色のコード６桁』として下さい。
確認してアップロード
ローカル環境で設定の変更を確認して、OKならFTP転送します。
確認の段階で画像が反映されない時は、画像名を再度チェックします。
『〜〜.jpg』と『〜〜.png』や『-』ハイフンと『_』アンダーバーの記述間違いという事が多いですね。
ローカル環境ではOKだったのに、実サイトに反映されない。
画像を『images』にFTP転送し忘れてないですかぁ？
それでもダメでも、それで正常です。
CSS、特に『style.css』の場合は、ブラウザの『キャッシュを空にする』を実行すれば反映されます。
おまけ
「本体部分も背景画像にしたいなぁ〜。」と思った方は、
全体に背景画像をどうぞ＾＾v