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

慣れてしまえばただ数値を変えるだけなのですが、初心者さんにとっては少し苦労するところかもしれません。なにせ、いろんな文字や数字がたくさん出てくるから。

まずは、そのまま入力(コピペなど)してみて表示が変わった事を確認してみましょう。それから、数値を変えてあなたのお好みの状態にアレンジしてみて下さい。

それでは、変更する場所を確認しておきましょう。

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

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}

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

	.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 a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}

この赤の数値を変えるだけでOK!!小さくすれば縦幅が狭くなります。反対に大きくすれば太くなります。

グローバルナビの文字間の調整

ココです!!ココに追加/編集して下さい。

	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		padding: 0 10px;
		padding: 0 0.714285714rem;
		text-transform: uppercase;
		white-space: nowrap;
	}

同様に数値の大小で幅の間隔が変更できます。’rem値’についてはこちら。’padding’の数値(px)÷14で算出した値が’rem値’になります。

グローバルナビの表示を左端から離す

テーマTwentyTwelveのグローバルナビって、デフォルト表示だと左端にピッタリくっついてませんか?これねぇ、困りました(笑　で、チョッと右に寄せて丁度いぃ位置から表示させたいと思います。

	.main-navigation ul {
		margin: 0;
		padding-left: 10px;
		padding-left: 0.714285714rem;
		text-indent: 0;
	}

ココです!!これくらいの距離が丁度いぃかなぁ?って思います。これでTwentyTwelveのグローバルナビゲーションの高さや幅の調整が出来たハズです。

これが出来るとかなり嬉しいですよね?私も最初は戸惑いましたが、きっと出来る様になると思いますよ☆

WordPressデザインブック　ステップバイステップ形式でマスターできる