ヘッダーメニューは、Webサイトの上部に表示するグローバルメニューです。メニュー数は7件ほどを目安に配置します。
表示設定
WordPress管理画面 > 外観 > メニューからヘッダーメニューに表示したいメニューを作成します。メニュー設定にあるメニューの位置は、ヘッダーメニューにチェックを入れて保存します。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-menu-01.png)
配色
WordPress管理画面 > 外観 > カスタマイズ > ヘッダー設定 > ヘッダーメニューをクリックすると、下記画面が表示されます。ヘッダーメニューの背景色やメニュー項目、マウスオーバー時の色などを指定できます。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2024/04/header-menu-02.png)
メニュー項目[オーバーレイ]は、ファーストビューがオーバーレイ指定の場合に適用される配色です。
メニュー区切り
メニュー項目の間に区切り線を追加する機能です。縦線と斜線のいずれかを指定できます。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-menu-03.png)
ボーダー[下部]の表示
ヘッダーメニューの下部にボーダー線を追加する機能です。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-menu-04.png)
表示オプション
WordPressテーマEmanonは、メニューの下に説明文を表示できます。WordPress管理画面 > 外観 > メニューにある表示オプションをクリックし、説明にチェックを入れます。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/08/menu-display-options.png)
次に、メニューの説明文に短いテキストを入力してください。下記の図は、説明にHomeと入力した例です。入力が終わりましたら、保存ボタンをクリックしてください。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/08/menu-display-options-ex.png)
完成すると下記のように説明付きのメニューになります。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/08/menu-has-display-options-ex.png)
メニューにページ内リンクを設定
ページ内リンクは、カスタムリンクをメニューに配置します。カスタムリンクのURLに#から始まる任意の英数字(HTMLアンカー)を入れ、CSS class(オプション)には、js-smooth-scroll を入力してください。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/10/link-in-page-01.png)
メニューにCSS class(オプション)がない場合、外観>メニューの表示オプションをクリックし、CSS クラスにチェックを入れてください。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/08/menu-add-css.png)
次にページ内リンク先のブロックにて高度な設定からHTMLアンカーにカスタムリンクのURLを入力します。(#は不要の入力は不要です。)
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/10/link-in-page-02.png)
以上でページ内リンクの設定が完了します。
関連機能 レイアウトデザイン
ヘッダーメニューのレイアウトはヘッダー設定>レイアウトデザインで指定します。詳細は下記マニュアルを参照ください。
関連機能 メガメニュー
サブ項目を階層メニューとして大きく表示する機能です。外観>メニューから設定を行います。詳細は下記マニュアルをご覧ください。