ワードプレステーマTwentyTenで、滞在しているページ(開いているページ)にいる時のグローバルナビのリンク文字の表示変更をする方法です。

テーマTwentyTenでは、デフォルトですと滞在時のメニュー文字の色が’白’の設定になっているハズです。しかも、グローバルナビをマウスオーバーした時にも同じ状態になっているハズです。

つまり、ナビゲーションの色を変えた人にとっては、マウスオーバーした時に色が’白’に変わってしまうと言う現象が起きてしまいます。

中には、太字にしたい人もいらっしゃるかもしれません。または、色だけを変えたいと思うかもしれませんよね。今回は、そこのところを変更していきたいと思います。

TwentyTenはココを変更すればOK!!

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

#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;
}

この部分が、滞在時のメニュー文字の設定部分です。しかも、マウスオーバー時の変更部分はありません。

まずは、この部分を追加/編集して、滞在時のメニュー文字の設定をしてみましょう。色を変えたい方は、カラーコードを変更して下さい。

#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;
	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;
	font-weight: bold;
}

赤色の部分を変えると、滞在ページのメニュー表示の色が変わります。また、緑の部分を加えると、’太字’になります。太字にしたくない人は、加えないで下さい。

下の青の部分は、マウスオーバー時の滞在ページのメニュー文字の設定です。ココも、カラーはお好みの色に設定してみて下さい。

また’font-weight’は’normal’にすると普通の太さになります。’太字’にしたくない人は、変更して下さい。

チョッとややこしいなぁ…、って方は、まずはコピペして貼り付けてサイト表示を確かめてみて下さい。その上で色や文字の太さなどを調節してみると良いでしょう。

これで、滞在ページのメニュー文字が変わったハズです。もう、’白’にならずに済みますね(笑