ヘッダーメニューは、Webサイトの上部に表示するメニューです。Webサイトの主要なページをわかりやすく伝える目的があります。そのためメニュー数は最大7件ぐらいまでに抑え、メニュー名は分かりやすい日本語名で設定することを推奨します。
メニューの設定
メニューは、WordPress管理画面の外観>メニューから設定します。メニュー画面の「新しいメニューを作成しましょう。」をクリックし、新規メニューを追加します。
新しいメニューの作成
メニュー名(例 ヘッダーメニュー)を入力し、「メニューを作成」ボタンをクリックします。

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

ヘッダーメニュー[ドロップ]とヘッダーメニュー[固定]
ヘッダーメニュー[ドロップ]は、画面を下から上にスクロールした際に表示される追従型のメニューです。パソコンでWebサイトを閲覧している時に適用されます。
ヘッダーメニュー[固定]は、画面のスクロールに追従するメニューです。パソコンでWebサイトを閲覧している時に適用されます。ヘッダーメニュー[ドロップ]と異なり、スクロール中は常時表示されます。
ヘッダーメニュー[ドロップ]とヘッダーメニュー[固定]の併用はできません。
スマホでメニューを固定表示する方法
スマホでWebサイト閲覧時にメニューを固定表示したい場合、外観>カスタマイズ>デザイン設定のハンバーガーメニュー設定でハンバーガーメニュー[追従]とアニメーション[無効]にチェックを入れてください。
メニュー項目を追加
ヘッダーメニューとヘッダーメニュー[ドロップ]に表示したいメニュー項目を追加します。追加できるメニュー項目は以下のとおりです。
- 固定ページ:固定ページを作成すると名前が追加されます。
- 投稿ページ:投稿ページを作成すると名前が追加されます。
- ニュース:Emanon設定>タブ「カスタム投稿」で設定が必要です。
- セミナー:Emanon設定>タブ「カスタム投稿」で設定が必要です。
- 資料請求:Emanon設定>タブ「カスタム投稿」で設定が必要です。
- セールス:Emanon設定>タブ「カスタム投稿」で設定が必要です。
- カスタムリンク:URLを自由に設定できます。
- カテゴリー:カテゴリーページを追加できます。
- CAT[セミナー]:「セミナー」のカテゴリーページを追加できます。
- CAT[ニュース]:「ニュース」のカテゴリーページを追加できます。
- CAT[資料請求]:「資料請求」のカテゴリーページを追加できます。
メニュー項目から追加したいメニューにチェック(1)を入れて「メニューに追加」(2)ボタンをクリックすると、メニュー構造にメニューが反映(3)されます。

メニューの並び順を変更する
追加したメニューの並び順を変更したい場合、移動したいメニュー項目をドラッグ&ドロップします。並び替えが終わりましたら「メニューを保存」をクリックしてください。
ドロップダウンメニューを設定する方法
ドロップダウンメニューとは、親メニューがマウスオーバーされた際に表示する子メニューです。親メニューと子メニューを設置することでヘッダーメニューを階層化できます。
ドロップダウンメニューを設定したいメニューの直下(右ずらし)に、子メニューをドロップします。子メニューは「副項目」と表示されます。
設定内容の確認・メニューを保存
メニュー構造の設定内容を確認してから「メニューを保存」ボタンをクリックします。

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

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

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

メニューにアイコンを表示する方法
メニュー編集画面にてナビゲーションラベルにアイコンフォントのタグを下記の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を作成し入力します。URLの最後に/を入れると機能しませんのでご注意ください。
デモサイト01の場合、カスタムリンクのURLは、https://wp-emanon.jp/emanon-premium/demo01/#cust_section-3となります。

カスタムリンクをヘッダメニューに追加します。追加したカスタムリンクを開き、CSS class(オプション)にu-smooth-scrollと入力します。以上でスムーススクロールの設定は終わりです。
CSS class(オプション)が表示されない場合、メニュー設定画面にある表示オプションを確認してください。

ブロックのid属性 HTML アンカー
高度な設定に対応したブロックの場合、HTMLアンカーの欄に任意の単語を入力できます。HTML アンカーに入力した内容は、そのブロックのid属性として使用できます。

指定メニュー項目:メニューを強調:ボタン風デザイン
メニュー編集画面の指定メニュー項目にチェックを入れるとメニュー項目に背景色を指定できます。指定メニュー項目は最大2つまで指定が可能です。


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

ヘッダーメニューのデザイン設定
ヘッダーメニューをマウスオーバーした際のアニメーションや、区切り線などデザイン設定が可能です。
ヘッダーメニューのデザイン設定については、デザイン設定をご確認ください。