【Cocoon】グローバルメニューのカスタマイズ方法

こんにちは、まちゃりさです。

今回は、WordPressのテーマ「Cocoon」をご使用の方向けに、ヘッダーの「グローバルメニュー」をカスタマイズする方法をご紹介します。

「グローバルメニュー」とは、ヘッダーに表示される次のようなメニューです。

本記事では、次の「グローバルメニュー」のカスタマイズ項目をご紹介します。

それぞれの設定イメージは次のような感じです。

本記事では、上記①～⑥の設定方法について、解説していきます。

それでは、どうぞ！

グローバルメニューのカスタマイズ

今回ご紹介するグローバルメニューのカスタマイズは次の6つです。

※リンクをクリックすると、項目の説明に遷移します。

1つずつご紹介していきます。

①背景色を変更する

まずご紹介するのは、「背景色の変更」です。

デフォルトでは「白色」の背景色を好きな色に変更します。（下の①）

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。

下にスクロールし、「グローバルナビメニュー色」へ移動します。

次の項目を設定します。

色は、カラーコードを指定するのが便利です。

以下のサイトから簡単に調べることができます。

日本の伝統色 和色大辞典 - Traditional Colors of Japan

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

「ヘッダー全体色」のみを指定する

ヘッダー全体の色を統一させて表示したい場合、ヘッダー全体色のみを指定します。

（※下記のように、上部と下部で色を分けたくない場合に使用します）

　

▼設定イメージ

設定が終わったら、「変更をまとめて保存」をクリックし保存します。

②表示幅を変更する

次は、「表示幅の変更」です。

項目同士の幅を広げたり、狭めたりすることが可能です。（下の②）

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。

下にスクロールし、「グローバルナビメニュー幅」へ移動します。

次の項目を設定できます。

▼設定イメージ

副項目の幅を調整できます。デフォルト「240」で設定されています。

あまり使用しない項目ですが、表示が見切れてしまう場合に指定するとよいです。

サブメニューの設定については、【Cocoon】ヘッダーにグローバルメニューを表示させる方法でご紹介しています。

（※サブメニューが設定できるのは、PCのみです）

設定が終わったら、「変更をまとめて保存」をクリックし保存します。

③表示位置を変更する

次は、「表示位置の変更」です。

グローバルメニューをヘッダーの上部に移動させることも可能です（下の③）

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。

「ヘッダーレイアウト」で、ヘッダーのレイアウトを指定できます。

ヘッダーレイアウトの表示は、以下サンプルを参考にしてください。

設定が終わったら、「変更をまとめて保存」をクリックし保存します。

④区切り線を入れる

続いて、「区切り線の変更」です。

グローバルメニューの項目間に区切り線を入れることができます（下の④）

隣り合う項目間を、しっかり区切りたい場合に使用してみてください。

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[外観]→[カスタマイズ]と進みます。

「追加CSS」に、以下のコードを記入します。（以下の枠内をクリックして表示される右上のボタンをクリックするとコピーできます）

/***  グローバルメニュー項目間の区切り***/
#navi .navi-in > ul > li{
  border-right: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

ちょっとしたポイント！

コードを追記するときは、以下のようにコメントとあわせて日付を入れておくと後から見返せるので便利です。

外側の項目にも線を入れたい場合は、代わりにこちらのコードを入力してください。（以下の枠内をクリックして表示される右上のボタンをクリックするとコピーできます）

/***  グローバルメニュー項目間の区切り（外枠）***/
#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

入力し終わったら、「公開」をクリックします。

⑤アイコンフォントを入れる

続いて、アイコンフォントを入れるカスタマイズ方法です。

グローバルメニューのメニュー設定から変更します。

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[外観]→[メニュー]と進みます。

グローバルメニューを作成している「メニュー」を選択します。

ここでは、「カスタムリンク」を使用したやり方をご紹介します。

「カスタムリンク」の「▼」をクリックし、入力欄を表示します。

以下の項目をそれぞれ入力します。

（※2）「Font Awesome」のバージョン確認

[Cocoon設定]から、[全体]→[サイトアイコンフォント]を確認します。

ここでは、下記のような「アイコン＋文字列」を表示させたい場合のやり方をご紹介します。

Font Awesomeのアイコンページから、使用したいアイコンをクリックして選びます。

＜i class=＞から</i>まですべてをコピーします。

<i class="far fa-envelope"></i>

クリックすると、コピーできます。

「リンク文字列」にそのまま貼り付けて、

貼り付けたコードの一番後ろに、表示したい文字列を入力します。（今回は、「お問い合わせ」と入力しました。）

そのまま、「メニューに追加」をクリックします。

最後に、「メニューを保存」をクリックして保存します。

アイコン付き文字がグローバルメニューに表示されます。

⑥サブキャプション機能（補足説明）を使用する

サブキャプション機能（補足説明）を使用する方法をご紹介します。

項目の下に、補足説明を入れることができます。（下の⑤）

▼設定のやり方

ワードプレス管理画面(ダッシュボード)から、[外観]→[メニュー]と進みます。

グローバルメニューを作成している「メニュー」を選択します。

補足説明を表示したい項目の詳細を開き（▼をクリック）、説明欄を入力します。

今回は、「お問い合わせページです」と入力しました。

最後に、「メニューを保存」をクリックして保存します。

まとめ：グローバルメニューのカスタマイズ

いかがでしたか？

今回は、以下のグローバルメニューのカスタマイズについてご紹介しました。

※項目リンクをクリックすると、戻れます。

グローバルメニューは、サイトの目立つ部分に表示されるメニューです。

ユーザが目的の記事にたどり着きやすいように、わかりやすく設定するとよいです。

ぜひ、本記事を読んで設定してみてください。

それでは、今回はこの辺で終わります。

最後までお読みいただき、ありがとうございました！

おわり。

参考

本記事は、Cocoon作成者「わいひら」さんの、以下の記事をもとに作成しました。

Cocoonについてのおすすめ記事

【Cocoon】スキンどれ選ぶ？特徴と評判｜「モノクロ」～「ミックス」シリーズまで

2021.09.242022.08.09

【Cocoon】スキンどれ選ぶ？特徴と評判をまとめてみた！

2021.09.242021.10.08

【Cocoon】スキンどれ選ぶ？特徴と評判｜「旅カメラ」～「Metal Styles」まで

2021.09.242021.10.10

【Cocoon】スキンどれ選ぶ？特徴と評判｜「サムライブルー」～「Bizarre-food」シリーズまで

2021.09.242021.10.10

【Cocoon】簡単！サイト型トップページの作り方（図解付き）

2021.05.192021.10.28