グローバルナビゲーション設定

グローバルナビゲーションのカラー設定方法をご案内します。

ここでは、グローバルナビゲーションの文字色や第2階層・第3階層の項目の背景色などを設定できます。

なお、PC用とスマホ用のカラー設定は別個になっています。ご注意ください。

グローバルナビゲーションのカラーを設定する

テーマカスタマイザーを開く

WordPressダッシュボードにて「テーマ」→「カスタマイズ」と進みます。

「グローバルナビゲーション設定」へ進む

「グローバルナビゲーション設定」をクリックすると、以下の設定項目が表示されます。

グローバルナビゲーション[第一階層]

グローバルナビゲーション[第一階層]リンク色

第一階層(親階層)のリンク色を設定します。

定義リストのタイトル

定義リストの本文

グローバルナビゲーション[第一階層]リンクホバー色

第一階層(親階層)の項目にマウスホバーしたときの文字色を設定します。

グローバルナビゲーション[第二階層]

グローバルナビゲーション[第二階層]リンク色

第二階層(子階層)のリンク色を設定します。

グローバルナビゲーション[第二階層]背景色

第二階層(子階層)の項目の背景色を設定します。

グローバルナビゲーション[第二階層]ホバー時の背景色

第二階層(子階層)の項目にマウスホバーしたときの文字色を設定します。

グローバルナビゲーション[第三階層]

グローバルナビゲーション[第三階層]リンク色

第三階層(孫階層)のリンク色を設定します。

グローバルナビゲーション[第三階層]背景色

第三階層(孫階層)の項目の背景色を設定します。

グローバルナビゲーション[第三階層]ホバー時の背景色

第三階層(孫階層)の項目にマウスホバーしたときの文字色を設定します。

スマホ用設定

スマホ用ナビゲーションの最初に「ホーム」へのリンクを表示する

ブログタイトル部分にトップページへのリンクがあるため、PC用ナビゲーションではトップページへのリンクを設置したくない場合があると思います。

しかしスマホ用ナビゲーションは展開すると全画面表示されるため、ブログタイトルをタップすることができません。

「PC用ナビゲーションには『ホーム』へのリンクを設置したくないが、スマホ用ナビゲーションには設置したい」という場合はこちらにチェックを入れてください。

スマホ用ナビゲーション「ホーム」リンクのテキスト

「ホーム」へのリンクを表示する設定にした場合のリンクテキストを入力してください。

ハンバーガーメニューのカラー設定

メニューアイコンのカラー設定です。

メニューアイコンの文字色【スマホ用】

メニューアイコンのカラー設定です。

メニューアイコンの背景色【スマホ用】

メニューアイコンの背景色を設定します。

「閉じる」ボタンのカラー設定

グローバルナビゲーション「閉じる」ボタンの文字色【スマホ用】

「閉じる」ボタン(×印部分)のカラーを設定します。

グローバルナビゲーション「閉じる」ボタンの背景色【スマホ用】

「閉じる」ボタン背景の色を設定します。

スマホ用ナビゲーション項目に関する設定

グローバルナビゲーションのリンク色【スマホ用】

ナビゲーションリンク項目の文字色を設定します。

グローバルナビゲーションの背景色【スマホ用】

ナビゲーションリンク項目のマウスホバーしたときの文字色を設定します。

グローバルナビゲーション項目のボーダー色【スマホ用】

ナビゲーションリンク項目のボーダー(区切り線)の色を設定します。

グローバルナビゲーション[第一階層]の背景色【スマホ用】

第一階層(親階層)の背景色を設定します。

グローバルナビゲーション[第二階層]の背景色【スマホ用】

第二階層(子階層)の背景色を設定します。

グローバルナビゲーション[第三階層]の背景色【スマホ用】

第三階層(孫階層)の背景色を設定します。

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。

メインビジュアル設定

ヘッダーエリア設定