ワードプレステーマTwentyTwelveのグローバルナビゲーションの基本設定の仕方です。

テーマ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: #2175ab;
}
.main-navigation a:hover {
	color: #fa4444;
}

いかがですか?随分とスッキリしましたよね?実際の数値やカラーコードは、お好みで編集してみて下さい。

これで後は、グローバルナビの表示設定を行うだけですね☆

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