せいかつブログ

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

この記事は約11分で読めます。

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

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

 

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

「グローバルメニュー」のイメージ

 

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

  1. 背景色を変更する
  2. 表示幅を変更する
  3. 表示位置を変更する
  4. 区切り線を入れる
  5. アイコンフォントを入れる
  6. サブキャプション機能(補足説明)を使用する

 

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

背景色、②表示幅
「グローバルメニュー」のカスタマイズ1
「グローバルメニュー」のカスタマイズ1
表示位置
「グローバルメニュー」のカスタマイズ2
「グローバルメニュー」のカスタマイズ2
アイコンフォント
「グローバルメニュー」のカスタマイズ3
「グローバルメニュー」のカスタマイズ3
区切り線
「グローバルメニュー」のカスタマイズ4
「グローバルメニュー」のカスタマイズ4
補足説明
「グローバルメニュー」のカスタマイズ5
「グローバルメニュー」のカスタマイズ5

 

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

それでは、どうぞ!

▼「グローバルメニュー」を表示させる方法

参考:【Cocoon】ヘッダーにグローバルメニューを表示させる方法

 

スポンサーリンク

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

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

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

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

 

①背景色を変更する

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

 

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

背景色の変更
背景色の変更

 

▼設定のやり方

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

[Cocoon設定]→[ヘッダー]
[Cocoon設定]→[ヘッダー]

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

次の項目を設定します。

  • グローバルナビ色:背景色を変更できます
  • グローバルナビ文字色:項目の文字色を変更できます

 

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

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

 

カラーコードの入力例
グローバルナビメニュー色にカラーコードを入力する
グローバルナビメニュー色にカラーコードを入力する

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

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

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

ヘッダー全体の色を統一させて表示できる
ヘッダー全体の色を統一させて表示できる

 

▼設定イメージ

「ヘッダー全体色」のみを使用する
「ヘッダー全体色」のみを使用する

 

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

「変更をまとめて保存」をクリック
「変更をまとめて保存」をクリック

 

②表示幅を変更する

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

 

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

項目同士の幅の変更
項目同士の幅の変更

 

▼設定のやり方

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

[Cocoon設定]→[ヘッダー]
[Cocoon設定]→[ヘッダー]

 

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

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

  1. トップメニュー幅:項目間の幅を調整できます
  2. メニュー幅をテキストに合わせる:チェックを入れると、テキスト(文字サイズ)に合わせて長さを設定できます
  3. サブメニュー幅:副項目の幅を調整できます

 

▼設定イメージ

グローバルナビメニュー幅の設定
グローバルナビメニュー幅

 

①【トップメニュー幅】について

デフォルト「176」で設定されています。

より多くのメニューを1列に追加したい場合は数値を小さくします。

一方で幅が狭すぎると、長い名前のメニューは見切れてしまいますので、注意してください。

 

②【メニュー幅をテキストに合わせる】について

文字サイズにあわせて幅を自動調整してくれます。

長い名前のメニューも見切れずに表示できます。

 

③【サブメニュー幅】について

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

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

サブメニュー幅
サブメニュー幅

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

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

 

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

「変更をまとめて保存」をクリック
「変更をまとめて保存」をクリック

 

③表示位置を変更する

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

 

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

項目同士の幅の変更
項目同士の幅の変更

 

▼設定のやり方

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

[Cocoon設定]→[ヘッダー]
[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;
}

 

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

 

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

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

 

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

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

 

▼設定のやり方

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

[外観]→[メニュー]
[外観]→[メニュー]

 

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

グローバルメニューの作成は、「【Cocoon】ヘッダーにグローバルメニューを表示させる方法」を参考に作成してください。

   

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

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

 

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

  • URL:「http://」から始まるURLを入力します。
    カテゴリページや投稿記事のURLも使用できます。
  • リンク文字:アイコンのコード(※1)と文字列を入力します。

(※1)アイコンのコード

「Font Awesome」のバージョンを確認後(※2)、以下のそれぞれのサイトからアイコンを選び取得します。

(※2)「Font Awesome」のバージョン確認

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

「Font Awesome」のバージョンの確認
「Font Awesome」のバージョンの確認

 

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

お問い合わせアイコンの表示
お問い合わせアイコンの表示

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

使用したいアイコンをクリック
使用したいアイコンをクリック

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

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

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

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

 

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

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

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

コードの一番後ろに、表示したい文字列を入力
コードの一番後ろに、表示したい文字列を入力

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

「メニューに追加」をクリック
「メニューに追加」をクリック

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

「メニューを保存」をクリック
「メニューを保存」をクリック

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

 

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

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

 

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

サブキャプション機能(補足説明)
サブキャプション機能(補足説明)

 

▼設定のやり方

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

[外観]→[メニュー]
[外観]→[メニュー]

 

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

グローバルメニューのメニューを選択
グローバルメニューのメニューを選択

グローバルメニューの作成は、「【Cocoon】ヘッダーにグローバルメニューを表示させる方法」を参考に作成してください。

 

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

項目の詳細を開き、説明欄を入力
項目の詳細を開き、説明欄を入力

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

項目の詳細を開き、説明欄を入力2
項目の詳細を開き、説明欄を入力2

 

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

「メニューを保存」をクリック
「メニューを保存」をクリック

 

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

いかがでしたか?

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

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

 

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

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

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

 

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

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

おわり。

 

参考

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

 

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

【Cocoon】簡単!サイト型トップページの作り方(図解付き)
【Cocoon】モバイル(スマホ)用のグローバルナビメニューを設定する方法
【Cocoon】簡単!吹き出しの基本的な使い方
【Cocoon】グローバルメニューのカスタマイズ方法
【Cocoon】ヘッダーにグローバルメニューを表示させる方法

コメント

タイトルとURLをコピーしました