【Cocoon】サクッとグローバルメニューを設定しちゃおう!

外観
びたろー
びたろー

こんにちは!びたろーです。

今回はCocoonでのグローバルメニュー(ヘッダーメニュー)の設定方法について解説していきます。

グローバルメニューは、サイト構造がわかるだけでなく、読者に目的のページを探しやすくする大切なものです。

無料の外観テーマであるCocoonでは、簡単にこのグローバルメニューの設定をすることができます。

図を使いながら解説しますので、どうぞご参考に。

◆当ページはリンクの一部にアフィリエイト広告を使用しています。◆

グローバルメニューとは

グローバルメニューとは、ブログ内のメニューです。

カーソルを当てるとプルダウンメニューが出てきて、カテゴリーごとの構成がわかる仕組みになっています。

大抵、サイトのタイトルの下側に表示されています。

グローバルメニューはユーザーにサイト構成を簡単に理解してもらえるので、興味あるページへの遷移を促す効果が期待できます。

また、グローバルメニューはGoogleにサイト内のコンテンツを知らせる役目もあるので、SEO上、設定しておくことが望ましいです。

グローバルメニューを設定する際の注意点

グローバルメニューは、カテゴリーだけでなく外部サイトへのリンクなどもメニュー項目として設定することができます。

ただし、必要でないコンテンツまでグローバルメニューに設定してしまうと、Googleの検索エンジンに正しくサイトの内容を伝えられなくなる恐れがあります。

内容をよく考えてグローバルメニューを設置しましょう。

グローバルメニューの設定

それでは具体的にグローバルメニューの設定について解説いたします。

メニューの準備

メニュー設定作業の前に、何をメニューに表示させるか決めておきます。

カテゴリー・・・・・どのようなカテゴリーをメニュー表示するか。
          場合によってすでに投稿している記事のカテゴリーも調整します。

固定ページ・・・・・お問い合わせやプロフィールページなどをメニューに表示するか。

投稿記事・・・・・・ある記事をメニューの1項目として表示するか

カスタムリンク・・・外部サイトへリンクさせるか。

階層も含め、何をメニューとして表示させるかをあらかじめ決めておきましょう。

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

ここからは、メニューの設定作業になります。

メニューの作成

◆WordPressの左サイドのメニューから「外観」→「メニュー」を選択します。

◆「編集するメニューを選択」のプルダウンから「ヘッダーメニュー」を選択します。

ここで入力する内容は

  • メニュー名・・・自分が分かりやすい名前を入力します。
  • メニューの位置・・・メニューを表示させたい位置を選択します。

◆メニュー項目を追加していきます。

続いて表示させたいメニューの項目を、左側の「メニュー項目を追加」の部分にある、

「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中から選び、各項目の右側にある“▼”をクリックして設定していきます。

カテゴリーを追加する

  • 「カテゴリー」の“▼“をクリック。
  • メニューに表示させたいカテゴリーのチェックボックスにチェックを入れます。
  • 選び終えたら[メニューに追加]ボタンをクリックします。

※▼をクリックしてプルダウンを表示したときは、「よく使うもの」に分類されたものが表示されます。目的の項目(ページ)がない場合は、「すべて表示」のタブをクリックするとすべて表示されます。

固定ページを追加する

  • 「固定ページ」の▼をクリック。
  • メニューに表示させたい固定ページのチェックボックスにチェックを入れます。
  • 選び終えたら[メニューに追加]ボタンをクリックします。

 

投稿ページを追加する

  • 「投稿」の▼をクリック。
  • メニューに表示させたい投稿ページのチェックボックスにチェックを入れます。
  • 選び終えたら[メニューに追加]をクリックします。

※お目当てのページが表示されていなかったら“すべて表示”タブをクリックしましょう。

 

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

※カスタムリンクを設定する場合は、URLやリンク文字列を入力する必要があります。

  • 「カスタムリンク」の▼をクリック。
  • 表示させたいサイトのURLを入力します。
  • メニューとして表示するタイトルをリンク文字列として入力します。
  • 入力を終えたら[メニューに追加]をクリックします。

ここまでの作業で、右側の”メニュー構造”の中に選んだメニューが追加されます。

メニューの表示順と階層構造の設定

表示順の調整

設定したメニューは、上から順番にサイト上では左から右に表示されます。

グローバルメニューに表示させる順番は、メニュー構造の設定画面でドラッグ&ドロップすることで変更します。

メニューの階層の設定

メニューに階層を設定したい場合もドラッグ&ドロップでできます。

階層を下げたい項目をドラッグし、右側へずらすと図の様に右にずれますので、その状態でドロップすることで階層をつけることが可能です。

以上がグローバルメニューの設定についてになります。

各項目を設定したら「メニューを保存」をクリックすることをお忘れなく。

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

Cocoonではグローバルメニューのカスタマイズも可能です。

カスタマイズは、「Cocoon設定」から行います。

ボックス

主なカスタマイズメニュー
  • ヘッダーレイアウト
  • ヘッダーロゴ
  • キャッチフレーズの配置
  • ヘッダー背景画像
  • ヘッダー全体色
  • グローバルナビメニュー色

※変更できる主な項目です。他にも変更できる項目があるので、自由に変更してください。

作業

WordPressの左メニューにある「Cocoon設定」をクリックします。

表示されたCocoon設定の画面から「ヘッダー」タブを選択します。

あとはカスタマイズしたい項目を設定して保存するだけです。

まとめ

グローバルメニューの設定は、読者が読みたい記事を探しやすくするためにとても大切な設定です。

検索エンジンにサイトの情報を伝える意味でも設定すべきといえます。

適切にグローバルメニューを設定して、読者に優しいブログづくりをしていきましょう。

微笑む女性

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

コメント

  1. tarchan より:

    こんにちは!丁寧にご説明されていてわかりやすかったです!ありがとうございます!

    • あさまべりー より:

      tarchanさん、こんにちは。
      ご覧いただきありがとうございます。お役に立てれば幸いです。今後もよろしくお願いいたします。

  2. yoshi より:

    「【Cocoon】サクッとグローバルメニューを設定しちゃおう!」たっぷり図解入りで分かりやすかったです。ありがとうございました。

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