ワードプレステーマTwentyTwelveのグローバルナビゲーションの背景に色をるける方法です。

テーマTwentyTwelveは、デフォルトですとなんともまぁ残念なグローバルナビですよね…(汗　恐らくコレは、自由にカスタマイズしてちょうだい♫ってことだと思っています。(勝手な推測です…。)

で、まずは基本中の基本である、色をつけるところからまいりましょう♫それでは、管理画面の「外観」⇒「テーマ編集」からスタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

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

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

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

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

	.site-header h1 {
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.846153846;
		margin-bottom: 0;
	}
	.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;
	}

デフォルトですと、上下に薄い線みたいなのが入っていて、メニュー文字が左にピッタリと寄っています…。まずは、それらを取り除き、文字の表示を左からチョッとだけ右に寄せます。で、色をつけたいと思います。

それでは、以下の様に追加/編集してみて下さい。

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

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

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

	.site-header h1 {
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.846153846;
		margin-bottom: 0;
	}
	.main-navigation ul.nav-menu,     /* グローバルナビの表示設定 */
	.main-navigation div.nav-menu > ul {
		/* border-bottom: 1px solid #ededed; */
		/* border-top: 1px solid #ededed; */
		background: #b0d17b;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		padding-left: 14px;
		padding-left: 1rem;
		position: relative;
       		-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;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}

いかがでしょうか?上下の余計な薄い線が消えて、グローバルナビの背景に色がついたハズです。また、チョッとオチャメに角に少し丸みをつけてみました(笑　丸みは要らないっ!!って方は、’青で追加した部分’を削除して下さい…(汗

また、背景色’background:’については、お好みの色をカラーコードで入力して下さい。

これで、少しグローバルナビゲーションっぽくなりました♫

ランディングページ作成ができるワードプレス用2カラムテンプレート
「LP Designer」レスポンシブWEBデザイン対応