ヘッダーメニューは、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の場合、表示>開発/管理>ディベロッパー ツールで指定箇所のソースコードを表示できます。

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(オプション)が表示されない場合、メニュー設定画面にある表示オプションを確認してください。

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

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

表示例

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

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

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

アニメーション[ホバー]の表示例

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