ワードプレステーマTwentyElevenのグローバルナビゲーションの幅を調節する方法です。TwentyElevenのグローバルナビゲーションのカスタマイズはコチラ♫TwentyTwelveのグローバルナビの調整はコチラ♫

さて、テーマTwentyElevenのグローバルナビゲーションは、デフォルトでも十分なくらい素晴らしいモノとなっていますよね。ただなぜか、色が黒…。。また、メニューの表示がとても中途半端ですよね?もチョッと左に寄せたいと思いました(笑

で、今回は色ではなく幅の調整です。あと、文字間。これが出来ると、表示の幅も広がりますよね(笑　それでは、調整(編集)する場所を確認しておきましょう。

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

/* =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);
	-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.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}

あーっ、見たくない見たくない…って方も大丈夫なので(笑　まずはコピペから始めてみて下さい。簡単ですから☆

グローバルナビゲーションの縦幅(高さ)の調整

はいっ!!ココです!!

#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}

この赤の数値を変えるだけでOK!!高さを狭めたければ値を小さく、幅を広げたい場合は値を大きくして下さい。ちなみに、当サイトではメニュー文字の大きさが’14px’でこの’line-height’を’3’にしてあります。目安にどうぞ。

メニュー文字の横幅(文字間)の調整

今度はココです!!

#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}

同じところでしたね(笑　この赤い数字のところが、メニュー文字の左右の横の幅(余白)に相当します。デフォルトの単位が’em’になっているのでチョッと分かりにくいんですが、ここは’px’に変えても大丈夫です。

’line-height’も’px’の方が分かりやすければ、変更しても大丈夫です。どちらにしても、ここの数値を変えれば表示が変わるってことが分かればOKです。ちなみに、当サイトでは’0.8125’にしてあります。

メニュー表示の左端からの位置調整

デフォルトだと、随分と中央寄りになってますよね?左側に余計な余白がたんまりあります(笑　ですから、メニュー(左端)の始まりをもうチョット左寄せにしたいと思います。

#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}

今度はココです!!これ、単位は’em’だし、しかも数値にマイナスがついているわで、非常にややこしい(笑　初心者さんは、頭抱えちゃいますよね?

もうね、分からない時は数字をイジってみる。とにかくまずは、下記のように変更してみて下さい。そうしたら、左側に寄りますから(笑

#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -4.5125em;
	padding-left: 0;
}

これで、テーマTwentyElevenのグローバルナビゲーションの縦幅/横幅の調整が出来たハズです。ちなみに、全体の幅を調整したい場合は、

#access
	width: 100%;
}

この数値を変えると変化します。まさか大きくする人はいないと思いますが…。。