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

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

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

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

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

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

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

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

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

スクロール途中からグローバルナビを固定する表示

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

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

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

サイトタイトル フォントサイズ：位置固定

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

ロゴの高さ

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

配色設定：位置固定ナビ［背景色］と位置固定ナビ［テキスト］

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

アニメメーション効果で演出

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

モバイルメニュー

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

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

ハンバーガーメニュー

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

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

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

配色設定：モーダルウィンドウ［背景色］とモーダルウィンドウ［テキスト］

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