WordPress グローバルナビ(メニュー)設定&カスタマイズ!

WordPress

みなさんこんにちわ、にゃーお。です。
WordPressでは定番のトップ画面のヘッダ部分に表示されるメニュー部分(グローバルナビ、グローバルメニュー、ナビゲーションメニュー・・・等々色々呼び名があります)、現在使用しているCocoonテーマでも設定ができるのですが、より見た目をカスタマイズしたい場合CSSによる変更が必要となります。
今回の記事ではグローバルメニューの設定からカスタマイズの方法まで記事にしたいと思いますのでお役に立てれば幸いです。

スポンサーリンク

グローバルナビとは??



名前の通り、グローバルなナビゲーション、つまりWebサイト全体のコンテンツにおける共通のナビリンク集。という意味になります。
たどり着きたい情報への道筋(ショートカット)となります。
非常に重要な意味を持っており、ユーザーを目的のコンテンツへナビゲートしつつ、各記事のページでも表示されるため迷子になりにくくいつでもホーム画面(トップページ)や他の関連記事に飛ぶことができます。

当ブログではここの部分ですね。

SEO上の意味

グローバルナビは各ページが集まる大きなリンク集です。検索エンジンは内部リンクが多く張られたページを重要なコンテンツと認識しますので検索エンジンにそのページが重要なコンテンツであることを伝える事にもなります。

Googleの検索エンジン最適化(SEO)スターターガイドラインでも以下のような記述があります。要チェック!

Search Engine Optimization (SEO) Starter Guide - Search Console Help
Who is this guide for? If you own, manage, monetize, or promote online content via Google Search, this guide is meant for you. You might be the owner of a growi...

検索エンジンにとって重要なナビゲーション
ウェブサイトのナビゲーションは、訪問者に必要なコンテンツをすばやく見つけてもらうために重要です。また、ナビゲーションによって、ウェブマスターが重要だと考えているコンテンツを検索エンジンが理解しやすくなります。Google の検索結果はページレベルで提供されますが、Google はサイト全体でそのページがどのような役割を果たしているのか把握しようとしています。

出典:検索エンジン最適化(SEO)スターターガイド

つまりSEO上、ナビゲーションの設定は非常に重要なものとなっているのです。

ユーザーにとって理想的なナビゲーションとは

グローバルナビゲーションとはユーザーの利便性が第一であり、結果SEO上の位置付けも大きい物でした。でははたしてどのような形が理想的なのでしょうか。(当ブログでも勉強中です・・・)

・メニューの量、階層の深さを複雑にしない。
当然情報量が多すぎるとユーザーはどこから記事を探せば良いのか分からず混乱します。極力シンプルにするよう、数は最低限、階層も最低限にすべきです。
マーケティングにおける数字の話で良く「マジックナンバー7」「マジックナンバー4」といったキーワードがあります。
つまり、人が目視して判断できる情報量はせいぜい4個前後。それ以上は雑音にしかならないのです。難しいですね。。。

・キーワードを乱用しない
キーワードを詰め込みすぎるとかえってわかりにくくなり利便性が低下します。Google検索上からもランキングに悪影響が出る恐れがあります。分かり難いメニュー名や作成者の志向に寄ったキーワードでは、クリック率の低下やサイト離脱を招く可能性があるのです。

・リンクの最適化
コンテンツの増加とともにコンテンツ間のリンク構造が複雑になりがちで検索エンジンもコンテンツの構造やページ間のリンク、重要なページを理解しにくくなってしまいます。そのためにも分かりやすい構造、リンク構成を意識して定期的に見直しをかけると良い状態を維持できるようになります。
主に考慮すべきリンクには、「グローバルメニュー」「記事内での内部&外部リンク」「パンくずリスト」「前後ページのナビゲーション」「サイドバーメニュー」「フッターリンク」があります。


スポンサーリンク

デザインのポイント



一番最初にユーザーが目に入るのはトップページのヘッダ部分やサイドバー部分です。基本的にグローバルメニューはヘッダ部分やサイドバー部分に設置しましょう。かつ、リンクには画像のみではなくテキストを用いたアンカーリンクが望ましいとされています。

以下、いくつか参考になるナビの事例をご紹介します。

みずほ銀行



スターバックスコーヒー



ユニクロ



ANA


スポンサーリンク

カスタマイズ方法



では本題のグローバルナビのカスタマイズ方法をご紹介します。当ブログはCocoonテーマを導入していますのでこれをベースにご紹介します。

メニューの設定

Cocoonテーマの場合、WordPress管理画面へログインして表示させると左サイドメニューに「Cocoon設定」があります。
これをクリックすると基本的な設定が一通りできる設定画面が表示されます。従来のWordPress標準のカスタマイズメニューに比べとても見やすくていいですね!

「ヘッダー」メニューをクリックするとヘッダー編集画面に切り替わります。 設定結果のプレビューを表示しながら変更できます。

メニューの背景画像有無や、背景の色、テキストの色等設定できるので自由に設定しましょう。

次にやることはメニュー設定です。
各メニュー内容やメニュー構成はWordPress管理画面上の「外観」設定から「メニュー」をクリックした設定画面で登録できます。

メニュー設定画面で「メニュー名」を入力し、「メニューを作成」をクリックしましょう。

するとメニュー名の下側に「メニュー構造」「メニュー設定」が表示されます。
保存する際にはグローバルメニュー設定位置にチェックを入れた状態で「メニューを保存」をクリックすればOKです。

「ホームへ戻る」メニューを作る

・ 左側のメニューから「カスタムリンク」を選びます。
・「URL」にブログのトップページのアドレスをコピーして貼り付けます。

・「メニューに追加」ボタンをクリックすると右側のメニュー構造に追加されます。後で順序は変更できるので気にせずどんどん作っていきましょう。
・「ナビゲーションラベル」にはグローバルメニューで表示したい名前を登録しましょう。ここでは「ホーム」としておきます。

これでグローバルメニューに「ホーム」が表示され、クリックすると設定したURLに切り替わります。

親メニュー(メインメニュー)を作る

各サブメニューをひとグループにまとめたメインメニューを設定します。
※クリックすると複数のサブメニューがプルダウン表示されるようなタイプを作る場合を想定します。
・さきほど同様に左側のメニューから「カスタムリンク」を選びます。
・「URL」には「#」と入力しましょう。これでクリックしても反応しません。

・「メニューに追加」ボタンをクリックすると右側のメニュー構造に追加されます。
・「ナビゲーションラベル」にはグローバルメニューで表示したい名前を登録しましょう。ここでは「メニューA」としておきます。

今回はテスト用に他に「メニューB」も作っておきます。

子メニュー(サブメニュー)を作る

メインメニューの子供にあたるサブメニューを設定します。こちらは各記事のカテゴリとリンクしている事が望ましいです。
・左側のメニューから「カテゴリー」を選びます。
・「すべて表示」タブをクリックし、該当するカテゴリにチェックを入れます。

・「ナビゲーションラベル」にはサブメニューで表示したい名前を登録しましょう。ここでは「サブメニュー1」としておきます。
操作方法はさきほどと同じです。

メニュー構成に合わせて並び替えする

このあと、サブメニューを親メニューの下階層にドラッグして移します。上下の並び替えも可能です。
最後にメニュー保存すればOKです。

出来上がりを見るとこんな感じですね。




メニューのデザインカスタマイズ



グローバルメニューの構成は図のようになっており、各クラスもしくはIDを指定する事でCSSで記述してカスタマイズができます。

・ナビ全体: navi
・ナビ内部: navi-in
・各メニュー部: menu-item -> naviのui、liで指定できます
・各サブメニュー部: sub-menu -> naviのui、liで指定できます
・マウスカーソルオーバー検出部: caption-wrap ※クラスのみ指定
・各メニュー&サブメニューのテキスト部: item-label ※クラスのみ指定

という事でカスタマイズ例です。

メニュー全体の上下にバーを表示する

上記の通り、ナビ全体は”navi”ですので、このIDを参照しborderプロパティを設定します。
※「solid」は直線、「1px」は線の太さ、「#7d216c」は色です。

当ブログの設定はこの通りです。


#navi {
border-top:solid 1px #7d216c;
border-bottom:solid 1px #7d216c;
}

以下ボーダースタイルのプロパティをご参考ください。
・none: ボーダーは表示されず太さも0
・hidden: ボーダーは表示されず太さも0
・solid: 1本線
・double: 2本線
・groove: 立体的に窪んだ。
・ridge: 立体的に隆起した線
・dashed: 破線
・dotted: 点線

破線と点線で設定するとこんな感じに。

マウスオーバー時の文字色変更

マウスオーバー時の挙動は対象物のID、もしくはクラスのプロパティを設定する事で実装できます。
「:hover」疑似クラスをセットで使い、マウスカーソルが重なったときの挙動を設定します。
この「:hover」、超優れものでほとんどの要素に使用可能であるうえに、重なったときのアニメーションもCSSで色々と作れます。これは追ってどこかで記事にしたいと思います。
今回はいったんシンプルに色が変わる感じで・・・

メインメニュー部分とサブメニュー部分のテキストを変更したいのですが、メインメニュー部分「navi」のul,li(順番指定のないリストを意味しています)で指定できますので、以下のように記載すればOKです。


/*マウスオーバー時,テキストカラー変更*/
#navi ul li a:hover{
color: #ce7ce9 !important;
}


マウスオーバー時の背景色変更



上記同様、マウスオーバー時の背景色も変更できます。
上記のように「navi」で指定するか、「caption-wrap」でも指定可能です。

・「navi」で指定するとサブメニュー部分の展開される背景部分全てが変更されます。
・「caption-wrap」で指定するとサブメニュー部のみが変更されます。つまり微妙の変更される範囲に違いがあります。

当ブログでは「caption-wrap」で指定しています。


/*マウスオーバー時,背景カラー変更*/
.caption-wrap:hover {
background-color:#f5dffc;
}

見た目はこんな感じになります。


メニューにアイコンを表示させる



方法は簡単!メニュー設定画面で設定した、ナビゲーションラベルにコードを追記するだけです。
メニューテキストの先頭にアイコンを表示させるにはFont Awesome Iconsのアイコン(FontAwesome5)を設定して表示させます。

Font Awesome

トップ画面上部のメニューから「ICONS」をクリックし、アイコンメニューを表示します。

このコードの部分をコピーしてください。クリックするだけでコピーできます。

さきほどコピーしたコードをWorsPress管理画面の「外観」->「メニュー」の設定画面からナビゲーションラベルの箇所に貼り付けます。

※コードが認識されない場合、classの”fas”部分の”s”を外してください。

これで設定完了です!

スポンサーリンク

さいごに



長々とした記事になってしまいましたが、グローバルメニューの必要性からポイント・設定方法まで一通りイメージができるのではないかと思います。SEOの面でもメリットのあるグローバルメニュー、参考になれれば幸いです。

最後まで読んで頂きましてありがとうございました。

コメント

  1. […] こちらの「zeroblo」というサイトです。グローバルナビについて検索していてたどりつきました。WordPress グローバルナビ(メニュー)設定&カスタマイズ!という記事がとても役に立ちました。またサイトもスッキリとスタイリッシュなデザインになっていて素敵です。 […]

  2. […] WordPress グローバルナビ(メニュー)設定&カスタマイズ!WordPressでは定番… […]