【Cocoon】モバイル（スマホ）用のグローバルナビメニューを設定する方法

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

今回は、WordPressのテーマ「Cocoon」をご使用の方向けに、ヘッダーにモバイル（スマホ・タブレット）用の「グローバルメニュー」を表示させる方法をご紹介します。

「ヘッダー(header)」はサイトページの上部のこと。

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

モバイル用のグローバルメニューは、768px以下の幅の端末で表示される仕様です。

パソコンでは表示されないので注意してください。

グローバルメニューとは？

グローバルメニューとは、このようなメニューです。

次からは、モバイル用の「グローバルメニュー」を設定する手順をご紹介します。

設定の手順は、次の3ステップで説明していきます。

まちゃりさ

慣れれば簡単にできます！

事前準備

設定に入る前に、モバイル（スマホ）用のグローバルメニューに、何を表示させたいかを決めておきましょう。

以下の項目から選んでおきます。

※１　サイトマップや問い合わせフォームなどの固定ページを言います。

※２　「http://」から始まる任意のURLです。

※３　カテゴリーページです。

何項目を設定すべき？

スマホなどのモバイル画面の場合、幅が小さくなります。

項目数は多くても5項目以内に抑えておくのがおすすめです。（項目はより少ない方がベター）

また、文字数が長いと見づらくなるので、長くなりすぎないよう注意します。

モバイル（スマホ）用グローバルメニューの作成

それでは、最初に表示用のメニューを作成していきます。

（※基本的なやり方は、グローバルメニュー作成のやり方と変わりません）

ワードプレス管理画面→[外観]→[メニュー]をクリックします。

「新しいメニューを作成しましょう」をクリックします。

続いて、作成したグローバルメニューに、記事やリンクをつけていきます。

メニュー項目に追加したい項目の▼を、それぞれクリックして設定していきます。

＞固定ページを追加する場合

①「固定ページ」の▼をクリックし、

②表示したい項目にチェックを入れます

③[メニューに追加]をクリックします

＞投稿ページを追加する場合

①「投稿」の▼をクリックし、

②表示したい記事にチェックを入れます

③[メニューに追加]をクリックします

＞カスタムリンクを追加する場合

①「カスタムリンク」の▼をクリックし、

②カスタムリンク（「http://」から始まるURL）を入力します

③表示させたい文言を入力します

④[メニューに追加]をクリックします

＞カテゴリーリンクを追加する場合

①「カテゴリー」の▼をクリックし、

②表示したいカテゴリーにチェックを入れます

③[メニューに追加]をクリックします

作成済みのメニューを使用したい場合は・・

「位置を管理」タブを開きます。

「ヘッダーモバイルメニュー」でモバイル用のグローバルメニューを選びます。

最後に左下の「変更を保存」ボタンを押してください。

【注意】

モバイルヘッダーナビでは、ドロップダウン状のサブメニュー（副階層）は表示できません。

補足説明

下記のような補足説明の表示ができます。

作成手順です。

ワードプレス管理画面→[外観]→[メニュー]を選択し、

表示されるメニュー画面の右上「表示オプション」をクリックします。

表示オプションの設定が表示されます。

この中から「説明」にチェックをいれます。

後は、①メニュー項目の「説明」欄に表示させたい「補足文」を入力し、

②「メニューを保存」をクリックします。

参考記事は、こちらです。

グローバルナビに補足説明文を記入する方法

グローバルナビの個別メニューアイテムに対して補足文（キャプション）を入力する方法の紹介です。

wp-cocoon.com

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

グローバルメニューは、他にも次のようにカスタマイズすることもできます。

➡こちらに興味がある方は、「【Cocoon】グローバルメニューのカスタマイズ方法」をご参考に設定してみてください。

まとめ

いかがでしたか？

今回は、Cocoonユーザ向けにヘッダーにグローバルメニュー（スマホ用）を表示させる方法についてご紹介しました。

グローバルメニューは、しっかり設定しておくと、読者が見たい記事に移動することができるので、便利です。

ぜひ、本記事を活用して、すてきなサイトを作成してみてください。

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

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

参考記事

Cocoon作成者のわいひらさんの記事を参考に作成しました。

モバイル用のグローバルナビメニューを設定する方法

スマートフォン等の画面の狭い端末で表示するモバイルメニューの設定方法です。

wp-cocoon.com

グローバルナビに補足説明文を記入する方法

グローバルナビの個別メニューアイテムに対して補足文（キャプション）を入力する方法の紹介です。

wp-cocoon.com

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