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

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

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

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

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

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

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

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

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

ヘッダー位置固定メニューの設定は次の注意事項があります。注意事項をご確認の上、設定をおこなってください。

スクロール途中からグローバルナビを固定する表示する場合、ヘッダー位置固定メニュー（サブメニュー不可）にメニューを設定し、カスタマイズのヘッダー設定を行います（「スクロール途中からグローバルナビを固定する表示」を参照）。

ヘッダー位置固定メニュー（サブメニュー不可）は、サブメニュー（階層メニュー）に対応していません（下記図の赤枠を参照）。サブメニュー（階層メニュー）付きのメニューを指定すると、正しく表示されませんのでご注意ください。

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

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

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

ロゴ画像を設定しない場合、サイトのタイトル名が文字として表示されます。位置固定ナビにした場合、ナビゲーションの左にサイトタイトルが表示されるので文字サイズを調整してください。

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

位置固定のグローバルナビの背景とテキストの配色を変更することができます。

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

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

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

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

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

また、外観＞ウィジェット＞ハンバーガーメニューを使うことで、モーダルウィンドウ内にメニュー以外の要素を表することができます。下記の例では、「検索」を設置しています。

ハンバーガーメニューをクリックした際に、全面に表示される画面をモーダルウィンドウと言います。モーダルウィンドウの背景とテキストの配色を変更することが可能です。