ワードプレステーマTwentyTenのグローバルナビゲーションのリンク/マウスオーバー時の色変更その②です。

テーマTwentyTenのグローバルナビの設定は、メニュー表示のリンクの色及びマウスオーバー時の色変更だけでは変わらない部分があります。

それは、滞在しているページに対応したメニュー文字(リンク)の色が別で設定されているからです。例えば、あなたが今TOPページを表示しているとします。すると、’ホーム’にマウスオーバーしても、変更した文字色に変わらないって事がおきてきます。

今回は、その部分を変更していきたいと思います。

それでは、管理画面から「外観」⇒「テーマ編集」より’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを変更して下さい)

スタイルシートの中から、次の部分を探して下さい。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}

～～～～～～～～～　中略　～～～～～～～～

#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

↓コレを以下の様に追加/編集して下さい。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}

～～～～～～～～～　中略　～～～～～～～～

#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;  /* ※1 */
	font-weight: bold;
}
#access ul li.current_page_item > a:hover,
#access ul li.current_page_ancestor > a:hover,
#access ul li.current-menu-ancestor > a:hover,
#access ul li.current-menu-item > a:hover,
#access ul li.current-menu-parent > a:hover {
	color: #000;  /* ※2 */
	font-weight: bold;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

追加するのは、青の部分と赤の部分です。それと、注意点があります。まず’※1’。この色は、あなたが設定したグローバルナビゲーションの文字色と同じにして下さい。(その方が良い)

そして’※2’こちらは、あなたが設定したグローバルナビゲーションのマウスオーバーした時のリンク文字色と同じにして下さい。(その方が良い)

ココの部分は、緑の部分が滞在しているページ(固定ページ)の文字色(グローバルナビの文字リンクの色)の設定です。滞在しているページのリンク色を変えたい場合は、任意の色に設定して下さい。

赤の部分が、滞在しているページ(固定ページ)のグローバルナビをマウスオーバーした時のリンク文字色です。

’font-weight: bold;’を加えたのは、滞在ページを分かりやすくする為に’太字’になる様にしてみました。太字にしたくない方は、この文は加えないで下さい。

これで、グローバルナビのすべてのメニュー文字が希望の色になったハズです。もし分かりにくい場合は、私の文章力がないせいなので、あなたのせいではありません…(汗