ブログカスタマイズ -背景編 その③-

前回、前々回で背景の素材は揃いましたので、いよいよこれら

をCSSを編集し背景にしていこうと思います。

まず準備として、これらの画像を

CSSの編集画面の上にある[ブログデザインヘッダ・背景用画像の追加]にてアップロードしておきます。
するとアップロードした画像の下に[この画像のパス]ができるのでそれを使用していくわけですね。

ではさっそくCSSをいじって行きましょう。
まずはCSSの中から

/* (3-1) ボディ（全体）
???????????????*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

の部分を見つけてください。

まずは一番下に

を敷き詰めようと思いますので、

.skinBody{}/* ←ブログ全体に背景を敷きたいとき */

の{　}内に

background-image:url(敷き詰めたい背景のURL);



を書き込みます。
つまりこんな感じになるわけですね。



/* (3-1) ボディ（全体）
???????????????*/
/* skinBody ボディ */
.skinBody{background-image:url(敷き詰めたい背景のURL);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}



次に.skinBody2{}に

の画像を入れます。
同じように.skinBody2{}の{　}内に


 background-image: url(ここに挿入したい画像のURL);
 background-repeat: repeat-x;


を書き込みます。
つまり、



/* (3-1) ボディ（全体）
???????????????*/
/* skinBody ボディ */
.skinBody{background-image:url(敷き詰めたい背景のURL);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{
 background-image: url(ここに挿入したい画像のURL);
 background-repeat: repeat-x;
}/*skinBody2画像を上で繰り返し*/
.skinBody3{}


となるわけですね。


そうすれば

こんな感じで背景を敷き詰めることができます。
ヘッダー部分の青空と草原の背景は上で繰り返しをするようにしてるので、ブログをスクロールすれば

このようについてくることはありません。
というわけで今回はこの辺で。


どうですか？
ブログの背景を変えるのは結構簡単だったと思います。

皆さんもぜひCSSを弄って自分のオリジナルなブログデザインを創りあげて下さいね。



>>背景編　その①へ