ワードプレステーマTwentyTwelveのグローバルナビゲーションのメニュー文字の位置変更についてです。

テーマTwentyTwelveはElevenとは対象的に、デフォルトではグローバルメニューの文字位置が左端に’ピタッ’!!っと、くっついています…(汗

Elevenの時は、随分と中央寄りでしたね。まぁ、なんでこんなに極端なのか良く分かりませんが…。。余談はこれくらいにして、メニュー文字をお好みの場所に表示出来るようにしていきましょう♫

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

スタイルシートの中から、次の箇所を見つけて下さい。

/* =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;
	}

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

/* =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;
		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: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		color: #000;
	}
	.main-navigation li { /* メニュー文字間の距離 */
		margin: 0;
		position: relative;
	}

これで、左端から少し距離が取れ、文字間が縮まったハズです。微調整は、各々の数値を変更してみて下さい。

こうゆう細かい設定は、とても骨が折れますね。それを考えるとテーマ作成ってスゴイですよね!!それを無料で使えるワードプレスは本当にありがたいです。