ヘッダー用グローバルナビの設定

グローバルナビとは、Webサイトのヘッダー部分に表示されるメニューリンクです。全ページ共有で表示されるので、サイト訪問者が現在見ているページの階層位置を把握するのに役立ちます。また目的のページに移動しやすいというメリットもあります。

WordPressのグローバルナビを設定する方法

WordPressの管理画面から、外観＞メニューをクリックします。新規メニューを作成をクリックすると下記内容が表示されます。

メニューの名前には、任意の名称（例グローバルナビなど）を入れ、「メニューを作成ボタン」をクリックします。

左のカラム（「固定ページ」・「投稿」・「カスタムリンク」・「カテゴリー」）からメニューに表示したいページを選択し「メニューに追加ボタン」をクリックします。

メニューの表示順序を変更したい場合、項目をドラッグして表示したい位置に移動させることができます。

最後にメニュー設定でメニューの表示位置をチェックします。

Emanon Proでは、ヘッダーメニューとヘッダー位置固定メニュー（サブメニュー不可）、モバイルメニュー（サブメニュー不可）、フッターメニュー（サブメニュー不可）の4カ所にメニューを表示することができます。

ヘッダー位置固定メニュー（サブメニュー不可）は、サブメニュー（階層メニュー表示）の使用はできません。ヘッダー位置固定メニューの表示方法は、次の「スクロール途中からグローバルナビを固定する表示」をご覧ください。

Emanon Proのグローバルナビは、通常の表示とスクロール途中からTOPに固定する表示（スクロール追尾）の２つ設定することができます。

WordPress管理画面＞外観＞カスタマイズ＞ヘッダー設定＞グローバルナビをクリックすると、下記画面が表示されます。

グローバルナビ設定を「位置固定」にチェックすることで、スクロール途中からグローバルナビが固定されます。

「ロゴの高さ：位置固定ナビ（最大値：40)」を調整することで、位置固定のグローバルナビに表示されるロゴ画像のサイズを調整することができます。

Emanon Proのスクロール追尾は、一定の位置にスクロールするとフェイドインでナビゲーションが表示されます。

モバイルメニューとは、水平にスクロールできるメニュー表示です。スマホ時のみ表示することができます。メニュー項目の数に応じて、右スクロールアイコン（矢印）の表示・非表示を設定することができます。

モバイルメニューには、WordPressの管理画面の外観＞メニューで「モバイルメニュー」に設定された項目が表示されます。

スマホからサイトを見た場合、グローバルメニューは自動で右上のアイコン（ハンガーメニュー）に自動で変更します。ハンガーメニューをクリックすると、モーダルウィンドウ化（画面全体にメニュー表示）します。

ハンガーメニューには、WordPressの管理画面の外観＞メニューで「ヘッダーメニュー」に設定された項目が表示されます。

また、外観＞ウィジェット＞モバイルメニューエリアを使うことで、モーダルウィンドウ内にメニュー以外の要素を追加も可能です。モバイルメニューエリアの上部には、サイトのロゴマーク（またはサイト名）が自動で表示されます。

下記例では、検索窓を設置しています。

ハンガーメニュー名や配色を変更することも可能です。