※当サイトには広告・プロモーションが含まれています

Cocoonで簡単!グローバルメニュー(ヘッダーメニュー)の設定方法

Cocoonで簡単!グローバルメニュー(ヘッダーメニュー)の設定方法 Cocoon
スポンサーリンク

グローバルメニュー(ヘッダーメニュー)とは、サイトの案内メニューのことです。

ユーザーや検索エンジンにサイトの構造を伝えることができ、SEO強化にもつながります。Cocoonでは設定やカスタマイズが簡単に行えるので、ぜひ設定しておきましょう。


グローバルメニュー(ヘッダーメニュー)とは


グローバルメニューとは、サイトの案内メニューのことです。

Cocoonではヘッダーメニューとも呼ばれており、ページの上部に表示されています(使用しているテーマやスキンによって表示位置は異なります)。

サイトのすべてのページに表示されるので、ユーザーが目的のページへとスムーズに移動できるので利便性の向上につながります。

また、グローバルメニューを設定していると検索エンジンにコンテンツの情報を伝えることができるので、SEOにも大切な意味がある機能です。


グローバルメニュー設定で大切なこと

  • サイト全体の構造が伝わるようなメニュー項目を設定
  • メニューの項目数は5個ぐらいまでがおすすめ


グローバルメニューには、カテゴリーや外部サイトのリンクなど表示させたいメニュー項目を自由に設定することができます。しかし、ユーザーの利便性やSEO効果につながるメニュー項目を設定しなければいけません。つまり、サイト全体の構造が伝わるようなメニュー項目を設定することが大切です。

どのぐらいの項目数がよいのかという具体的な数はありませんが、人に記憶してもらいたい情報を伝えるときにはなるべく少ない数がよいとされています。そのため、5個ぐらいまでの項目の設定がおすすめです。


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


それでは、例としてグローバルメニューに「カテゴリー」を表示させる方法を説明します。

カテゴリー以外でもサイト内部リンクなら設定方法は同じです。自身のサイトに合わせてメニュー項目は自由に変更してください。

※外部サイトへのリンクを設定する方法は、後述する「カスタムリンクを設定する方法」をご覧ください。

グローバルメニューにカテゴリーを設定するには、まずはカテゴリーを作成する必要があります。カテゴリーについてはこちらに記事で詳細を説明しています。


グローバルメニューにカテゴリーを設定する方法

1.左サイドバーにある「外観」→「メニュー」をクリックします。


2.メニュー名とメニューの位置を設定して「メニューを作成」をクリックします。

①メニュー名:自分で管理しやすい名前を入力します。サイトには表示されないので、自分でわかる名前で大丈夫です。

②メニューの位置:メニューを表示させたい位置を選択します。

※ここでは、PC(ヘッダーメニュー)とモバイル(ヘッダーモバイルメニュー)の位置に同じメニュー項目を表示させるので2つチェックしています。PCとモバイルそれぞれに違うメニュー項目を表示させたい場合は、別々に設定してください。


3.メニュー項目を追加できるようになりました。「カテゴリー」をクリックして、表示させたいメニュー項目をプルダウンの中から選んでチェックをつけます。「メニューに追加」をクリックします。

カテゴリー以外の項目(固定ページなど)を表示させたい場合も手順は同じです。

表示させたい項目(ページ)が見つからない場合は、各メニュー項目にある「すべて表示」タブをクリックしてください。サイトにあるすべての項目(ページ)が表示されます。


3.メニュー構造に選んだメニュー項目が追加されました。「メニューを保存」をクリックすれば完成です。

グローバルメニューに表示させる順番を変更したい場合は、ドラッグしてメニュー項目を入れ替えます。

上から並べたメニュー項目から順番に、実際のグローバルメニューでは左から右へと表示されます。


グローバルメニューに階層を設定したい場合


グローバルメニューには、階層(副項目)を設定することができます。階層をつけたい項目の下で右側に少しずらして配置すると設定できます。

実際の表示では、メニュー項目にカーソルを合わせると表示されます。

階層(副項目)は、子カテゴリーがあるときに設定すると便利です。


グローバルメニューにカスタムリンクを設定する方法

グローバルメニューにサイト内部リンク(固定ページ・投稿ページ・カテゴリー)を表示したい場合は、メニュー項目横にチェックを付けるだけで設定できました。

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

※カスタムリンクとは、URLを指定して作成したリンクです。外部サイトへのリンクを表示する場合に設定します



1.メニュー項目を追加にある「カスタムリンク」右横の矢印をクリックしてプルダウンを開きます。リンク先のURLとグローバルメニューに表示する名前を入力して、「メニューに追加」をクリックします。



2.カスタムリンクで設定した項目が追加されました。 「メニューを保存」をクリックすれば完成です。

※グローバルメニューに表示させる順番を変更したい場合は、メニュー項目をドラッグして入れ替えます。


グローバルメニューをカスタマイズする

グローバルメニューはサイトに合わせてカスタマイズすることができます。カスタマイズは、「Cocoon設定」から行います。


1.左サイドバーにある「Cocoon設定」→「ヘッダー」をクリックします。


2.カスタマイズしたい項目を選んでサイトのデザインに合うように設定を変更してください。 変更後は「変更をまとめて保存」をクリックします。

  • ヘッダーレイアウト:タイトルとグローバルメニューの表示形式が変更できる
  • ヘッダー全体色:グローバルメニューを含めた背景色が変更できるが変更できる
  • グローバルナビメニュー色:グローバルメニューの背景色やテキスト色が変更できる
  • グローバルナビメニュー幅:グローバルメニューの幅が変更できる

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


グローナビメニューのまとめ

  • グローバルメニューとはサイトの案内メニューのこと
  • グローバルメニューはSEOにも大切な意味がある
  • サイト全体の構造が伝わるようなメニュー項目を5つぐらいまで設定する

グローバルメニューの設定は、訪問者と検索エンジンにサイトの情報を伝える大切な機能です。自身のサイトに合わせて適切なメニュー項目を設定して、サイトの質の向上につなげましょう。



コメント

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