せいかつブログ

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

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

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

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

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

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

 

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

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

パソコンなど、768pxよりも大きな端末で表示するグローバルメニューの設定は、「【Cocoon】ヘッダーにグローバルメニューを表示させる方法」を参考に設定してください。

 

スポンサーリンク

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

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

  • サイト上部に常時表示される
  • ぱっと見て、サイトの内容を伝える役割をもつ
  • 他にも「グローバルナビ」、「グローバルナビゲーション」、「ヘッダーメニュー」とも言われる

 

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

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

モバイル用「グローバルメニュー」を設定する手順
  • STEP1
    事前準備

    作成イメージを決める

  • STEP2
    グローバルメニュー作成

    表示するメニューを作成する

  • STEP3
    グローバルメニュー設定

    STEP2で作成したメニューを表示させる

まちゃりさ
まちゃりさ

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

 

事前準備

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

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

  • 固定ページ(※1)
  • 投稿記事
  • カスタムリンク(※2)
  • カテゴリー(※3)

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

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

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

何項目を設定すべき?

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

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

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

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

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

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

 

メニュー作成手順

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

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

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

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

①メニュー構造の「メニュー名」を入力し(※)、

②メニュー設定の「メニューの位置」で「ヘッダーモバイルメニュー」をクリックします。

③最後に、[メニューを作成]をクリックします。

(※)ここでは例として、【グローバルメニュー(スマホ)】としました。

サイトで表示はされないので、自身で管理しやすい名前でOKです。

 

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

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

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

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

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

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

「固定ページ」の項目追加
「固定ページ」の項目追加

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

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

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

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

「投稿ページ」の項目追加
「投稿ページ」の項目追加

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

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

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

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

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

「カスタムリンク」の項目追加
「カスタムリンク」の項目追加

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

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

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

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

「カテゴリーリンク」の項目追加
「カテゴリーリンク」の項目追加

 

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

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

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

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

「位置を管理」タブ
「位置を管理」タブ

 

【注意】

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

副階層イメージ
副階層イメージ

 

補足説明

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

補足説明の表示例
補足説明の表示例

作成手順です。

メニュー作成手順

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

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

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

「表示オプション」をクリック
「表示オプション」をクリック

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

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

「説明」にチェック
「説明」にチェック

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

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

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

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

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

  • 背景色を変更する
  • 表示幅を変更する
  • 表示位置を変更する
  • 区切り線を入れる
  • アイコンフォントを入れる

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

まとめ

いかがでしたか?

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

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

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

 

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

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

参考記事

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

モバイル用のグローバルナビメニューを設定する方法
スマートフォン等の画面の狭い端末で表示するモバイルメニューの設定方法です。
グローバルナビに補足説明文を記入する方法
グローバルナビの個別メニューアイテムに対して補足文(キャプション)を入力する方法の紹介です。

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

【Cocoon】スキンどれ選ぶ?特徴と評判(詳細1)
【Cocoon】スキンどれ選ぶ?特徴と評判をまとめてみた!
【Cocoon】簡単!サイト型トップページの作り方(図解付き)
【Cocoon】モバイル(スマホ)用のグローバルナビメニューを設定する方法
【Cocoon】簡単!吹き出しの基本的な使い方

コメント

SNS

最近の投稿

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