せいかつブログ

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

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

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

 

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

 

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

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

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

 

「グローバルメニュー」を設定したいと思う方は、ぜひこの記事をご参考にしてください。

それでは、どうぞ!

 

スポンサーリンク

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

 

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

  • サイト上部に常時表示される
  • ぱっと見て、サイトの内容を伝える役割をもつ
  • パソコン等(768pxより大きな幅の端末)で表示される(※)
  • 他にも「グローバルナビ」、「グローバルナビゲーション」、「ヘッダーメニュー」とも言われる

※768px以下の場合は、モバイル用のグローバルナビを使用します。

 

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

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

「グローバルメニュー」設定の手順
  • STEP1
    事前準備

    作成イメージを決める

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

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

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

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

まちゃりさ
まちゃりさ

慣れれば簡単です!

 

事前準備

 

設定に入る前に、グローバルメニューに何を表示させたいかを決めておきましょう。

 

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

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

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

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

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

 

何項目を設定すべき?

他サイトでも、大体4~6項目くらいが一般的という印象です。

項目を多く設定したい場合は、幅を変更するなどして表示を工夫するとよいです。

 

当サイトでは、4つの「カテゴリー」と、1つの「固定ページ」(計5項目)を表示させています。

計5項目を表示
計5項目を表示

※ 2021年7月現在は、サイトデザインを変更しています。

 

グローバルメニューの作成

 

それでは、まず最初に表示させるためのメニューを作成していきます。

 

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

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

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

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

 

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

②[メニューを作成]をクリックします。

「メニュー名」を入力し[メニューを作成]をクリック
「メニュー名」を入力し[メニューを作成]をクリック

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

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

 

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

 

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

表示順の変更

表示順は、上から順番に左→右と表示されます。

この表示順を変更することも可能です。

 

▼設定方法

項目を右に追加した後、カーソルを合わせると十字マークが表示されます。

十字マークが表示される
十字マークが表示される

並べ替えたい項目をクリックし、上下にドラックアンドドロップします。

上下にドラックアンドドロップ
上下にドラックアンドドロップ

 

 

階層を分ける

副階層をつけることも可能です。

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

 

▼設定方法

項目を右に追加した後、カーソルを合わせると十字マークが表示されます。

十字マークが表示される
十字マークが表示される

階層を変更したい項目をクリックし、右方向にドラックアンドドロップします。

右方向にドラックアンドドロップ
右方向にドラックアンドドロップ

階段のように階層ができれば、OKです。

 

グローバルメニューの表示方法

 

項目をすべて追加したら、下にスクロールします。

そして、

①「メニュー設定」項目から「ヘッダーメニュー」を選択します。

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

ヘッダーメニューを選択し、メニューを保存
ヘッダーメニューを選択し、メニューを保存

 

まちゃりさ
まちゃりさ

以上で終わりです!

グローバルメニューが正しく表示されているか確認してみましょう!!

 

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

 

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

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

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

 

まとめ:Cocoonヘッダーにグローバルメニューを表示させる

 

いかがでしたか?

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

 

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

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

 

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

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

おわり。

 

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

 

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

コメント

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