ワードプレステーマTwentyTwelveグローバルナビゲーションのカスタマイズの方法です。

個別の記事で書き残したのですが、やっぱりチョッと分かりづらいかも!?と思い、グローバルナビゲーションを一括でカスタマイズしてみます。

• 基本設定
• 背景色の変更
• メニュー文字の変更
• マウスオーバー時の背景色/メニュー文字色の変更

これらをカスタマイズしてみる事にしましょう。チョッと長くなりますが、お付き合い頂ければと思います。

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

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

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover {
	color: #21759b;
}

↓これを、以下の様に編集してみて下さい。

/* Navigation Menu */
.main-navigation {
	margin-top: 0;
	margin-top: 0rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 10px;
	margin-top: 0.714285714rem;
	font-size: 14px;
	font-size: 1rem;
	line-height: 1.714285714;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover {
	color: #21759b;
}

それが済みましたら、’スタイルシート’からさらに次の部分を探して下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

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

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}

↓これを、以下の様に追加/編集してみて下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

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

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		background: #b0d17b; /* Show a solid color for older browsers */
		background: -moz-linear-gradient(#b0d17b, #eaffb8);
		background: -o-linear-gradient(#b0d17b, #eaffb8);
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b0d17b), to(#eaffb8)); /* older webkit syntax */
		background: -webkit-linear-gradient(#b0d17b, #eaffb8);
		-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
		-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
		box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px;
		-moz-border-radius:3.5px;
        	-webkit-border-radius:3.5px;
        	-khtml-border-radius:3.5px;
        	border-radius:3.5px;
        	-moz-border-radius:0.25rem;
        	-webkit-border-radius:0.25rem;
        	-khtml-border-radius:0.25rem;
		border-radius:0.25rem;
		clear: both;
		width: 98.5%;
		display: inline-block !important;
		text-align: left;
	}
	.main-navigation ul {
		margin: 0;
		padding-left: 10px;
		padding-left: 0.714285714rem;
		position: relative;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
        	display: inline-block;
        	text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #5a5a5a;
		line-height: 2.5;
		padding: 0 8px 0 8px;
		padding: 0 0.571428571rem 0 0.571428571rem;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		background: #eaffb8; /* Show a solid color for older browsers */
		background: -moz-linear-gradient(#eaffb8, #ffffe6);
		background: -o-linear-gradient(#eaffb8, #ffffe6);
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaffb8), to(#ffffe6)); /* Older webkit syntax */
		background: -webkit-linear-gradient(#eaffb8, #ffffe6);
		color: #000;
		-moz-border-radius:3.5px;
        	-webkit-border-radius:3.5px;
        	-khtml-border-radius:3.5px;
        	border-radius:3.5px;
        	-moz-border-radius:0.25rem;
        	-webkit-border-radius:0.25rem;
        	-khtml-border-radius:0.25rem;
		border-radius:0.25rem;
		padding: 0 8px 0 8px;
		padding: 0 0.571428571rem 0 0.571428571rem;
	}
	.main-navigation li {
		margin: 0;
		position: relative;
	}
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}

これで、グローバルナビゲーションが変更出来たハズです。かなり見やすく分かりやすくなったと思います。
赤色の数字を変更すると、メニュー文字の色が変わるハズです。また、緑色の数字を変更すると、マウスオーバーした時のメニューの文字が変わるハズです。

当サイトのグローバルナビゲーションと色違いで設定してみました。よろしければ、どうぞご活用下さい。

サイト表示が変わると、記事投稿も変わってくるかもしれませんね(笑