サイドボックスタイトルの文字色を変えよう

サイドボックスタイトルの文字色を変えましょう。

今回は基本の文字色と、マウスが乗った状態の文字色を変えます。

基本の文字色を変えよう

サイドボックスタイトルの文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの494行目「h3.leftBoxHeading, h3.leftBoxHeading a 」と530行目「h3.rightBoxHeading, h3.rightBoxHeading a」で文字色が「color: #ffffff;」「color: #FFFF00;」とそれぞれ指定されています。これを「color: #696969;」と書きかえ上書き保存します。

変更前

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #FFFF00;
	}

変更後

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #696969;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #696969;
	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

マウスが上に乗った状態の文字色を変えよう

マウスが上に乗った時の文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの544行目「h3.leftBoxHeading a:hover」と549行目「h3.rightBoxHeading a:hover」で文字色が「color: #FFFF33;」「color: #FF0000;」とそれぞれ指定されています。これを「color: #ffd700;」と書きかえ上書き保存します。

変更前

h3.leftBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #FF0000;
	text-decoration: none;
	}

変更後

h3.leftBoxHeading a:hover {
	color: #ffd700;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #ffd700;
	text-decoration: none;
	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。