ワードプレステーマTwentyElevenで、滞在しているページに対応しているグローバルナビゲーションの表示(背景色/文字など)を変更する方法です。

こんな感じになります。よろしければ、任意のページを開いてみて下さい。滞在しているページに対応しているグローバルナビゲーションのメニュー背景や文字(色/太さ)などが変わっているのがお分かり頂けると思います。

ちなみに、テーマTwentyTenのグローバルナビゲーションの表示を変更したい方は、コチラを参考にしてみて下さい。

変更する場所さえ分かれば、後は装飾を変えるだけです。それでは実際に見てみましょう♫

滞在ページの表示変更はココ!!

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

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

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);

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

#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {　/* ココです!! */
	font-weight: bold;
}

この通り、デフォルト表示は’太文字’になる様な設定になっています。この部分に追加/編集すれば、滞在ページにいる時のグローバルナビゲーションの表示を変更する事ができます。

例えば、以下の様に追加/編集してみて下さい。

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

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);

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

#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {　　/* ココです!! */
	background: #お好きなカラーコード;　　/* 背景色 */
	-moz-border-radius:3px;
        -webkit-border-radius:3px;
        -khtml-border-radius:3px;
        border-radius:3px;
	color: #お好みのカラーコード;　　/* 文字色 */
	font-weight: bold;
}

青色の部分は、オチャメにも角を丸めています(笑　要らない方は、追加しなければ大丈夫です。また、太字にしたくない人は、’font-weight’を’bold’から’normal’に変更して下さい。

これで、滞在ページにいる時にグローバルメニューの表示が変わったハズです。訪問者にやさしい親切なページ作りになりました☆

⇒売れちゃう!!テンプレートがこの価格!!