ヘッダーメニューの設定

ヘッダーメニューは、Webサイトの上部に表示するメニューです。Webサイトの主要なページをわかりやすく伝える目的があります。そのためメニュー数は最大7件ぐらいまでに抑え、メニュー名は分かりやすい日本語名で設定することを推奨します。

メニューの設定

メニューは、WordPress管理画面の外観＞メニューから設定します。メニュー画面の「新しいメニューを作成しましょう。」をクリックし、新規メニューを追加します。

新しいメニューの作成

メニュー名（例 ヘッダーメニュー）を入力し、「メニューを作成」ボタンをクリックします。

次にメニューの位置を設定します。ヘッダーメニューにチェックを入れます。

ヘッダーメニュー［ドロップ］とヘッダーメニュー［固定］

ヘッダーメニュー［ドロップ］は、画面を下から上にスクロールした際に表示される追従型のメニューです。パソコンでWebサイトを閲覧している時に適用されます。

ヘッダーメニュー［固定］は、画面のスクロールに追従するメニューです。ヘッダーメニュー［ドロップ］と異なり、スクロール中は常時表示されます。

ヘッダーメニュー［ドロップ］とヘッダーメニュー［固定］の併用はできませんのでご注意ください。

メニュー項目を追加

ヘッダーメニューとヘッダーメニュー［ドロップ］に表示したいメニュー項目を追加します。追加できるメニュー項目は以下のとおりです。

• 固定ページ：固定ページを作成すると名前が追加されます。
• 投稿ページ：投稿ページを作成すると名前が追加されます。
• ニュース：Emanon設定＞タブ「カスタム投稿」で設定が必要です。
• セミナー：Emanon設定＞タブ「カスタム投稿」で設定が必要です。
• 資料請求：Emanon設定＞タブ「カスタム投稿」で設定が必要です。
• セールス：Emanon設定＞タブ「カスタム投稿」で設定が必要です。
• カスタムリンク：URLを自由に設定できます。
• カテゴリー：カテゴリーページを追加できます。
• CAT［セミナー］：「セミナー」のカテゴリーページを追加できます。
• CAT［ニュース］：「ニュース」のカテゴリーページを追加できます。
• CAT［資料請求］：「資料請求」のカテゴリーページを追加できます。

メニュー項目から追加したいメニューにチェック（１）を入れて「メニューに追加」（２）ボタンをクリックすると、メニュー構造にメニューが反映（３）されます。

メニューの並び順を変更する

追加したメニューの並び順を変更したい場合、移動したいメニュー項目をドラッグ＆ドロップします。並び替えが終わりましたら「メニューを保存」をクリックしてください。

ドロップダウンメニューを設定する方法

ドロップダウンメニューとは、親メニューがマウスオーバーされた際に表示する子メニューです。親メニューと子メニューを設置することでヘッダーメニューを階層化できます。

ドロップダウンメニューを設定したいメニューの直下（右ずらし）に、子メニューをドロップします。子メニューは「副項目」と表示されます。

設定内容の確認・メニューを保存

メニュー構造の設定内容を確認してから「メニューを保存」ボタンをクリックします。

表示オプション

メニュー設定画面にある表示オプションの説明を使用するとメニュー名の下にテキストを表示することが可能です。

まず、メニュー設定画面にある表示オプションをクリックし、説明にチェックを入れます。

次にメニューの編集画面にて説明に文言を入力し保存してください。

メニューにアイコンを表示する方法

メニュー編集画面にてナビゲーションラベルにアイコンフォントのタグを下記のHTML形式で挿入してください。

<i class="icon-XXX"></i>

Emanon Premium専用ウィジェット［E］アイコンメニューを使用する場合、事前にメニュー編集画面でナビゲーションラベルを設定します。

ナビゲーションラベルに挿入するアイコンフォントのタグは、WordPress管理画面＞Emanon設定メニューの下にあるアイコン一覧を参照してください。

次に外観＞ウィジェットから［E］アイコンメニューをサイドバーに配置します。メニュー選択で作成したアイコン付きメニューを設定してください。

以上の設定で、サイドバーにアイコンメニューが表示されます。

ページ内リンク：スムーススクロール

ページ内リンクとは、リンクをクリックするとページ内のid属性で指定した箇所に自動でスクロールするリンクです。クラスu-smooth-scrollを使うことで、ページ内リンクをクリックした場合になめらかなスクロールを指定することができます。

リンクのhtml例
<div class=”u-smooth-scroll“><a href=”#アンカー名”>リンク</a></div>

リンク先 html例
<div id=”アンカー名”>内容</div>

ヘッダーメニューにページ内リンクを設置する手順

デモサイト01を例にヘッダーメニューにページ内リンクを設置する手順をご紹介します。

ヘッダメニューは、既に作成済みとして手順を記載していますのでご注意ください。

ページ内のid属性を調べるためにWebブラウザの開発者ツールを使ってページのソースコードを閲覧できる状態にします。Google Chromeの場合、表示＞開発/管理＞ディベロッパー ツールで指定箇所のソースコードを表示できます。

デモサイト01ではヘッダーメニューのお客様の声をクリックすると、フロントページのお客様の声（ウィジェット［ Es］お客様の声を使用）に自動でスクロールします。

下記は、デモサイト01のお客様の声のソースコードをGoogle Chromeのディベロッパー ツールで表示しています。この場合、id=”cust_section-3″のcust_section-3が、リンク先のアンカー名です。

次い外観＞メニューに進み、カスタムリンクでリンクを作成します。カスタムリンクのURLには、サイトURL/#アンカー名の形式でURLを作成し入力します。

デモサイト01の場合、カスタムリンクのURLは、https://wp-emanon.jp/emanon-premium/demo01/#cust_section-3となります。

カスタムリンクをヘッダメニューに追加します。追加したカスタムリンクを開き、CSS class(オプション)にu-smooth-scrollと入力します。以上でスムーススクロールの設定は終わりです。

CSS class(オプション)が表示されない場合、メニュー設定画面にある表示オプションを確認してください。

指定メニュー項目：メニューを強調

メニュー編集画面の指定メニュー項目にチェックを入れるとメニュー項目に背景色を指定できます。

指定メニュー項目の配色は、外観＞カスタマイズ＞配色設定＞ヘッダーメニュー設定の指定メニュー項目・指定メニュー項目［背景色］・指定メニュー項目［ホバー］で指定します。

ヘッダーメニューのデザイン設定

ヘッダーメニューをマウスオーバーした際のアニメーションや、区切り線などデザイン設定が可能です。

ヘッダーメニューのデザイン設定については、デザイン設定をご確認ください。