ヘッダー設定

ロゴ画像の設定、ヘッダーメニュー・ドロワーメニューなどメニュー関連、ヘッダーCTAなどサイトのヘッダー周りに関するデザイン指定ができます。

外観＞カスタマイズ＞ヘッダー設定に移動し、下記の設定手順に沿って、ヘッダー周りのデザインをおこないます。

ヘッダーのロゴとメニューの表示レイアウトや横幅などを指定する設定です。

レイアウトデザインの設定項目は次のとおりです。

上記以外の項目は初期値のままです。

ヘッダーの右上に電話番号やボタンを表示する設定です。ヘッダーCTAは、ヘッダーレイアウトが2行：ロゴ［左］の場合に適用されます。

当サイトでは電話番号のみを表示しています。ヘッダーCTAの表示を有効に切り替えてください。

ヘッダーメニューは事前設定が必要です。外観＞メニューにてヘッダーメニュー用のメニューを作成してください。設定手順は、ヘッダーメニュー設定マニュアルをご覧ください。

メガメニュー

ヘッダーメニューの一部にサブ項目がメガメニュー（階層メニューを横幅に広げて表示）なる設定を行なっています。詳細は、メガメニュー設定マニュアルをご覧ください。

ヘッダーメニューの区切り線

次に外観＞カスタマイズ＞ヘッダー設定＞ヘッダーメニューに移動します。当サイトでは、メニューの区切り線を追加しています。区切り線のデザインは斜線です。

ヘッダーメニューの配色はお好みの色に指定してください。

ヘッダーメニュー［追従］は、画面の下スクロールに合わせてメニューが追いかけてくるデザインです。スクロール［追従］で指定します。ヘッダーメニュー［ドロップ］は、画面の上スクロール時に表示するメニューデザインです。スクロール［ドロップ］で指定します。

当サイトでは、背景色［透過率］を0.8に指定し、アニメーション設定をスクロール［追従］を選択。スクロール追従［SP］を有効に設定しています。

ハンバーガーメニューはスマホ表示時に三本線で表示されるメニューボタンです。ヘッダーの右上に配置されます。

当Webサイトでは、配色の「背景色を有効にする」を有効にしています。

ドロワーメニューは、ハンバーガーメニューをクリックした際に表示するメニューです。メニュー項目は外観＞メニューで設定します。

当デモサイトでは、次のように設定しています。

ドロワーメニューには専用ウィジェットエリアが用意されています。当デモサイトでは、ウィジェットエリア：ドロワーメニュー［下部］にブロックを配置してデザインしています。

ドロワーメニュー［下部］に配置したブロックは、上からスペーサー・見出し［Emanon］¹・スペーサー・アイコン²です。

1. 見出し［Emanon］は、プラグインEmanon Blocksのブロックです。
2. アイコンは、プラグインEmanon Blocksのブロックです。

ヘッダーメニューの下部にお知らせを表示する機能です。当デモサイトでは、フロントページに対してインフォメーションを非表示にしています。