ワードプレステーマ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;
}
いかがですか?随分とスッキリしましたよね?実際の数値やカラーコードは、お好みで編集してみて下さい。
これで後は、グローバルナビの表示設定を行うだけですね☆
ピンバック: TwentyTwelve グローバルナビゲーションのメニュー文字(色/サイズ/フォント)の設定 | 初めてのワードプレス カスタマイズ