せいかつブログ

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

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

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

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

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

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

本記事でご紹介する「グローバルメニュー」のカスタマイズは、こちらです。

  • ①背景色を変更する
  • ②表示幅を変更する
  • ③表示位置を変更する
  • ④区切り線を入れる
  • ⑤アイコンフォントを入れる
  • ⑥サブキャプション機能(補足説明)を使用する

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

「グローバルメニュー」のカスタマイズ1
「グローバルメニュー」のカスタマイズ1
「グローバルメニュー」のカスタマイズ2
「グローバルメニュー」のカスタマイズ2
「グローバルメニュー」のカスタマイズ3
「グローバルメニュー」のカスタマイズ3
「グローバルメニュー」のカスタマイズ4
「グローバルメニュー」のカスタマイズ4
「グローバルメニュー」のカスタマイズ5
「グローバルメニュー」のカスタマイズ5

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

それでは、どうぞ!

スポンサーリンク

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

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

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

 

背景色を変更する

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

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

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

【設定方法】

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

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

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

次の項目を設定します。

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

色は、カラーコードを指定するのが便利です。以下のサイトから選ぶと簡単です。

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

「ヘッダー全体色」のみを指定すると、ヘッダー全体の色を統一させて表示できます(上部と下部で色を分けたくない場合に使用します)

「ヘッダー全体色」のみを使用する
「ヘッダー全体色」のみを使用する
ヘッダー全体の色を統一させて表示できる
ヘッダー全体の色を統一させて表示できる

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

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

 

表示幅を変更する

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

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

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

【設定方法】

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

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

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

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

  • ①トップメニュー幅:項目間の幅を調整できます
  • ②メニュー幅をテキストに合わせる:チェックを入れると、テキスト(文字サイズ)に合わせて長さを設定できます
  • ③サブメニュー幅:副項目の幅を調整できます
グローバルナビメニュー幅
グローバルナビメニュー幅

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

デフォルトが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も使用できます。
  • リンク文字:アイコンのコード(※)と文字列を入力します。

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

▶Font Awesome4の場合は、こちらのFont Awesome4のアイコンページにいきます。

▶Font Awesome5の場合は、こちらのFont Awesome5のアイコンページにいきます。

「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をコピーしました