背景画像を変える(5)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

今回は背景画像の変更方法です。

１）背景画像の指定場所
ブログの表示部分に背景に画像を使う場合には、#containerの指定を変更します。スタイルシートの中から#containerを探します。たぶんかなり上の方にあるはずです。
※containerという指定がない場合、ブログのソースを見て、いちばん最初に出てくる<div id="***">と指定されている部分に背景イメージの指定があることが多いです。

#container{
text-align:center;
margin:0px auto 0px 0px;
padding:0px;
width:750px;
background-image:url(http://***.co.jp/myfiles/image/bgimage.gif);
background-repeat:repeat-y;
}

ここでbackground-imageの部分を変更します。

背景画像を作成してアップロードしたら、そのURLをbackground-image:url以下にかっこで囲んで書きます。

※ページの背景に画像を使う場合にはbodyの中に背景画像の指定を行います。

２）背景画像の作成
containerの中の背景画像はブログの表示部分に影響してきます。

このブログでは記事部分とサイドメニュー部分で色を変えてあります。記事部分の幅は470px、サイドメニューの幅は220pxです。細い帯状の画像を作り、少し大きめの473pxと227pxの２色に分けた画像を作ります。

さらに右端に影部分のぼかしを入れ、最後は背景色と同じになるようにグラデーションを入れました。
※背景色はbodyで指定してあります。ここではタイトル画像の色に合わせて変更しました。

これをbgimage.gifという名前で保存、アップロードします。

※記事部分とサイドメニュー部分の幅はスタイルシートの中に指定があります。

#content {
margin-top:20px;
margin-bottom:30px;
float:left;
width:470px;
color:#000;
text-align:left;
}

#links {
font-weight:normal;
width:220px;
float:left;
text-align:left;
padding:0px 0px 0px 5px;
}