サイドボックスタイトルに背景画像を表示しよう

背景色の表示をなくそう

画像のオレンジ枠内のようにサイドボックスタイトルに色が付けられています。

これはスタイルシートの定義をわかりやすくするためで、背景画像を設定するときには不要です。 背景色の指定をコメントアウトし表示しないようにしましょう。

1. ソースの書きかえ

CSSの488行目の「.leftBoxHeading, .centerBoxHeading」で左サイドボックスとセンターボックスが一括で指定されています。これを個別に指定できるように書き変えましょう。

変更前

.leftBoxHeading, .centerBoxHeading  {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

CSSの488行目の「.leftBoxHeading」で左サイドボックスタイトルの背景色が「background-color: #FF6699;」と指定されています。これを「/*background-color: #FF6699;*/」と書きかえ上書き保存します。

変更前

.leftBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	}

左サイドボックスの「スポンサー」の部分は個別に指定されています。 画像 CSSの554行目「#bannerboxHeading」で背景色が「background-color: #0000CC;」と指定されています。これを「/*background-color: #0000CC;*/」と書き換え上書き保存します。

変更前

#bannerboxHeading {
	background-color: #0000CC;
}

変更後

#bannerboxHeading {
	/*background-color: #0000CC;*/
}

CSSの行目の「.rightBoxHeading」で右サイドボックスの背景色が「background-color: #663366;」と指定されています。これを「/*background-color: #663366;*/」と書き換え上書き保存します。

変更前

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.5em 0.2em;
	}

変更後

.rightBoxHeading {
	margin: 0em;
	/*background-color: #663366;*/
	padding: 0.5em 0.2em;
	}

2. 確認

ブラウザの更新をクリックし確認します。 サイドボックスタイトルの背景色の表示がなくなり別の背景色が表示されています。 ここは後ほど説明しますので今は気にしないでおきましょう！

背景画像を表示しよう

次に画像を指定し背景画像を表示しましょう。

1. 画像を用意

幅150×高さ23の画像（sidebox.gif）を用意します。

2. ソースの書きかえ

CSSの488行目「.leftBoxHeading」で左サイドボックスに画像を（sidebox_1.gif）を指定する記述「background: url(../images/sidebox_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	background: url(../images/sidebox_1.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし確認します。左サイドボックスタイトルに 背景画像が表示されました。

4. ソースの書きかえ

CSSの516行目「.rightBoxHeading 」に右サイドボックスに画像（sidebox_1.gif）を指定する記述「background: url(../images/sidebox_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.5em 0.2em;
	}

変更後

.rightBoxHeading {
	margin: 0em;
	/*background-color: #663366;*/
	padding: 0.5em 0.2em;
	background: url(../images/sidebox_1.gif) left top no-repeat;
	}

5. 確認

ブラウザの更新をクリックし確認します。 右サイドボックスタイトルに背景画像が表示されました。

画像を表示しましたが余計な背景色 が表示されていますので表示しないようにしましょう。

6. ソースの書きかえ

CSSの312行目「#navColumnOne」で左サイドボックスの背景色が「background-color: #cc9900;」、CSSの316行目「#navColumnTwo」で右のサイドボックスの背景「background-color: #00BFBF;」がそれぞれ指定されています。コメントアウトし表示しないようにしましょう。

変更前

#navColumnOne {
	background-color: #FFCC99;
	}

#navColumnTwo {
	background-color: #00BFBF;
	}

変更後

#navColumnOne {
	/*background-color: #FFCC99;*/
	}

#navColumnTwo {
	/*background-color: #00BFBF;*/
	}

7. 確認

ブラウザの更新をクリックし確認します。 背景色の表示がなくなりました。