こんにちは、まちゃりさです。
今回は、WordPressのテーマ「Cocoon」をご使用の方向けに、ヘッダーの「グローバルメニュー」をカスタマイズする方法をご紹介します。
「グローバルメニュー」とは、ヘッダーに表示される次のようなメニューです。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu1.png?resize=1024%2C463&ssl=1)
本記事では、次の「グローバルメニュー」のカスタマイズ項目をご紹介します。
- 背景色を変更する
- 表示幅を変更する
- 表示位置を変更する
- 区切り線を入れる
- アイコンフォントを入れる
- サブキャプション機能(補足説明)を使用する
それぞれの設定イメージは次のような感じです。
![「グローバルメニュー」のカスタマイズ1](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_7.png?resize=750%2C422&ssl=1)
![「グローバルメニュー」のカスタマイズ2](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_8.png?resize=750%2C422&ssl=1)
![「グローバルメニュー」のカスタマイズ3](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_9.png?resize=750%2C422&ssl=1)
![「グローバルメニュー」のカスタマイズ4](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_10.png?resize=750%2C422&ssl=1)
![「グローバルメニュー」のカスタマイズ5](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_11.png?resize=750%2C422&ssl=1)
本記事では、上記①~⑥の設定方法について、解説していきます。
それでは、どうぞ!
▼「グローバルメニュー」を表示させる方法
グローバルメニューのカスタマイズ
今回ご紹介するグローバルメニューのカスタマイズは次の6つです。
※リンクをクリックすると、項目の説明に遷移します。
1つずつご紹介していきます。
①背景色を変更する
まずご紹介するのは、「背景色の変更」です。
デフォルトでは「白色」の背景色を好きな色に変更します。(下の①)
![背景色の変更](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_7.png?resize=750%2C422&ssl=1)
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。
![[Cocoon設定]→[ヘッダー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_20.png?resize=1024%2C526&ssl=1)
下にスクロールし、「グローバルナビメニュー色」へ移動します。
次の項目を設定します。
- グローバルナビ色:背景色を変更できます
- グローバルナビ文字色:項目の文字色を変更できます
![グローバルナビメニュー色にカラーコードを入力する](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_12.png?resize=903%2C455&ssl=1)
設定が終わったら、「変更をまとめて保存」をクリックし保存します。
![「変更をまとめて保存」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_15.png?resize=628%2C172&ssl=1)
②表示幅を変更する
次は、「表示幅の変更」です。
項目同士の幅を広げたり、狭めたりすることが可能です。(下の②)
![項目同士の幅の変更](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_7.png?resize=750%2C422&ssl=1)
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。
![[Cocoon設定]→[ヘッダー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_20.png?resize=1024%2C526&ssl=1)
下にスクロールし、「グローバルナビメニュー幅」へ移動します。
次の項目を設定できます。
- トップメニュー幅:項目間の幅を調整できます
- メニュー幅をテキストに合わせる:チェックを入れると、テキスト(文字サイズ)に合わせて長さを設定できます
- サブメニュー幅:副項目の幅を調整できます
▼設定イメージ
![グローバルナビメニュー幅の設定](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_21-1.png?resize=1024%2C360&ssl=1)
設定が終わったら、「変更をまとめて保存」をクリックし保存します。
![「変更をまとめて保存」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_15.png?resize=628%2C172&ssl=1)
③表示位置を変更する
次は、「表示位置の変更」です。
グローバルメニューをヘッダーの上部に移動させることも可能です(下の③)
![項目同士の幅の変更](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_8.png?resize=750%2C422&ssl=1)
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[Cocoon設定]→[ヘッダー]と進みます。
![[Cocoon設定]→[ヘッダー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_20.png?resize=1024%2C526&ssl=1)
「ヘッダーレイアウト」で、ヘッダーのレイアウトを指定できます。
![ヘッダーレイアウト](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_22.png?resize=1024%2C454&ssl=1)
ヘッダーレイアウトの表示は、以下サンプルを参考にしてください。
ヘッダー(ロゴ部)とグローバルメニューを上下均一に表示する
![センターロゴ(デフォルト、トップメニュー)](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_16.png?resize=750%2C422&ssl=1)
ヘッダー(ロゴ部)をより大きく見せて表示する
![センターロゴ(スリムメニュー、スリムトップメニュー)](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_17.png?resize=750%2C422&ssl=1)
ヘッダー(ロゴ部)を左に、グローバルメニューを右に大きく表示する
![トップメニュー、トップメニュー(右寄せ)](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_18.png?resize=750%2C422&ssl=1)
ヘッダー(ロゴ部)エリアの中に、グローバルメニューを表示する
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_19.png?resize=750%2C422&ssl=1)
設定が終わったら、「変更をまとめて保存」をクリックし保存します。
![「変更をまとめて保存」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_15.png?resize=628%2C172&ssl=1)
④区切り線を入れる
続いて、「区切り線の変更」です。
グローバルメニューの項目間に区切り線を入れることができます(下の④)
![項目間に区切り線](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_10.png?resize=750%2C422&ssl=1)
隣り合う項目間を、しっかり区切りたい場合に使用してみてください。
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[外観]→[カスタマイズ]と進みます。
![[外観]→[カスタマイズ]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_38.png?resize=804%2C284&ssl=1)
「追加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;
}
入力し終わったら、「公開」をクリックします。
⑤アイコンフォントを入れる
続いて、アイコンフォントを入れるカスタマイズ方法です。
![アイコンフォントを入れる](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_9.png?resize=750%2C422&ssl=1)
グローバルメニューのメニュー設定から変更します。
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[外観]→[メニュー]と進みます。
![[外観]→[メニュー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_40.png?resize=634%2C366&ssl=1)
グローバルメニューを作成している「メニュー」を選択します。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_33-1.png?resize=1024%2C532&ssl=1)
ここでは、「カスタムリンク」を使用したやり方をご紹介します。
「カスタムリンク」の「▼」をクリックし、入力欄を表示します。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_36-1.png?resize=1024%2C507&ssl=1)
以下の項目をそれぞれ入力します。
- URL:「http://」から始まるURLを入力します。
カテゴリページや投稿記事のURLも使用できます。 - リンク文字:アイコンのコード(※1)と文字列を入力します。
ここでは、下記のような「アイコン+文字列」を表示させたい場合のやり方をご紹介します。
![お問い合わせアイコンの表示](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_26.png?resize=581%2C268&ssl=1)
Font Awesomeのアイコンページから、使用したいアイコンをクリックして選びます。
![使用したいアイコンをクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_27.png?resize=1024%2C734&ssl=1)
<i class=>から</i>まですべてをコピーします。
<i class="far fa-envelope"></i>
クリックすると、コピーできます。
![<i class=>から</i>まですべてをコピー](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_28.png?resize=1024%2C579&ssl=1)
「リンク文字列」にそのまま貼り付けて、
![「リンク文字列」にそのまま貼り付け](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_29.png?resize=858%2C534&ssl=1)
貼り付けたコードの一番後ろに、表示したい文字列を入力します。(今回は、「お問い合わせ」と入力しました。)
![コードの一番後ろに、表示したい文字列を入力](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_30.png?resize=954%2C492&ssl=1)
そのまま、「メニューに追加」をクリックします。
![「メニューに追加」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_31.png?resize=1024%2C475&ssl=1)
最後に、「メニューを保存」をクリックして保存します。
![「メニューを保存」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_32.png?resize=1024%2C491&ssl=1)
アイコン付き文字がグローバルメニューに表示されます。
⑥サブキャプション機能(補足説明)を使用する
サブキャプション機能(補足説明)を使用する方法をご紹介します。
項目の下に、補足説明を入れることができます。(下の⑤)
![サブキャプション機能(補足説明)](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_11.png?resize=750%2C422&ssl=1)
▼設定のやり方
ワードプレス管理画面(ダッシュボード)から、[外観]→[メニュー]と進みます。
![[外観]→[メニュー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_40.png?resize=634%2C366&ssl=1)
グローバルメニューを作成している「メニュー」を選択します。
![グローバルメニューのメニューを選択](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_33.png?resize=1024%2C532&ssl=1)
補足説明を表示したい項目の詳細を開き(▼をクリック)、説明欄を入力します。
![項目の詳細を開き、説明欄を入力](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_34.png?resize=1024%2C531&ssl=1)
今回は、「お問い合わせページです」と入力しました。
![項目の詳細を開き、説明欄を入力2](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_35.png?resize=1021%2C709&ssl=1)
最後に、「メニューを保存」をクリックして保存します。
![「メニューを保存」をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu_customize_32.png?resize=1024%2C491&ssl=1)
まとめ:グローバルメニューのカスタマイズ
いかがでしたか?
今回は、以下のグローバルメニューのカスタマイズについてご紹介しました。
※項目リンクをクリックすると、戻れます。
グローバルメニューは、サイトの目立つ部分に表示されるメニューです。
ユーザが目的の記事にたどり着きやすいように、わかりやすく設定するとよいです。
ぜひ、本記事を読んで設定してみてください。
それでは、今回はこの辺で終わります。
最後までお読みいただき、ありがとうございました!
おわり。
参考
本記事は、Cocoon作成者「わいひら」さんの、以下の記事をもとに作成しました。
コメント