ワードプレステーマ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 グローバルナビゲーションのメニュー文字(色/サイズ/フォント)の設定 | 初めてのワードプレス カスタマイズ