サイドボックスのデザインを変えよう

画像のオレンジ枠内に画像を表示しデザインを変えましょう。

Your rating: None

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

背景色の表示をなくそう

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

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

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. 確認

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

Your rating: None 平均: 4 (投票数 3)

サイドボックスに枠を入れよう

サイドボックスを枠で囲みましょう。

1. 画像を用意

幅150×高さ（サイドボックス内のメニューが収まる高さ）の画像（sidebox_2.gif）を用意します。

　　

2. ソースの書きかえ

「.sideBoxContent」内で背景色が指定されています。この背景色が表示されたままですと、画像を張り付けたとき色に隠れて表示されなくなってしまいますので、背景色の指定をコメントアウトし表示しないようにしましょう。 画像 CSSの506行目「.sideBoxContent」で背景色が「background-color: #ffffff;」と指定されています。これを「/*background-color: #ffffff;*/」と書きかえ上書き保存します

変更前
.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}
変更後
.sideBoxContent {
	/*background-color: #ffffff;*/
	padding: 0.4em;
	}

CSSの501行目「.leftBoxContainer」に画像を指定する記述を加えるのですが、今のままでは左サイドボックスしか指定されていません。右サイドボックスも一緒に指定できるようにしましょう。 画像 CSS行目「.leftBoxContainer」に右サイドボックスを指定す「.rightBoxContainer 」 を加えます。

変更前
.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}
変更後
.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

CSSの501行目「.leftBoxContainer,.rightBoxContainer 」に画像を（sidebox_2.gif）指定する「background: url(../images/sidebox_2.gif) left bottom no-repeat;」を加え上書き保存します。

変更前
.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}
変更後
.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	background: url(../images/sidebox_2.gif) left bottom no-repeat;
	}

4. 確認

ブラウザの更新をクリックし確認します。 画像が表示されました。 それと同時に右のサイドボックスのマージンが左サイドボックスと一緒になりました。 これは「.leftBoxContainer」に内に右サイドボックスを指定したのでマージントップが左と同じように「1.5em」空いたからです。

Your rating: None