ヘッダーエリアは、サイトの印象を左右する重要な要素です。Emanon Proでは、サイトのテーマにあった雰囲気にカスタマイズできます。
レイアウトデザイン
WordPress管理画面 > 外観 > カスタマイズ > ヘッダー設定 > レイアウトデザインをクリックします。
ヘッダーレイアウト
ロロとヘッダーメニューの位置を4種類から1つ選択します。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-01.png)
ヘッダーレイアウトのサンプルは次のとおりです。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-ex-01.png)
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-ex-02.png)
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-ex-03-1.png)
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-ex-04.png)
ヘッダー幅
ロゴとヘッダーメニューを全幅に切り替える機能です。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-02.png)
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/header-layout-ex-05.png)
ボーダー[下部]の表示
ヘッダーメニュー下部全体にボーダーを表示する機能です。お好みで色も指定できまます。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/eader-layout-03.png)
キャッチフレーズの表示位置
外観>カスタマイズ>基本情報で設定するキャッチフレーズの表示位置と文字サイズの指定が可能です。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2023/05/eader-layout-04.png)
サイトタイトルの文字サイズ
ロゴ画像を使用しない場合、サイトタイトルが表示されます。サイトタイトルの文字サイズは、PC表示とSP[スマホ]表示で指定が可能です。
ロゴサイズの高さ
ロゴ画像の大きさを調整できる機能です。スマホからサイトを見た場合のロゴがはみ出してしまうケースがあります。その場合、「ロゴの高さ:モバイル(最大値:60)」の数値を調整してください。
背景画像
ヘッダーエリア全体に背景画像を指定できます。背景画像の高さに合わせて、ヘッダーエリアの高さを調整することで見栄えを整えることができます。
配色
- キャッチフレーズ[背景色]:キャッチフレーズの表示位置が左上の場合に反映します。
- キャッチフレーズ[テキスト]:キャッチフレーズの文字色に反映します。
- サイトタイトル:サイトタイトル文字の色。ロゴが未設定の場合、サイトタイトルが表示されます。
- ヘッダー背景色:ヘッダーエリア全体の背景色に反映します。
![](https://wp-emanon.jp/emanon-pro/wp-content/uploads/2016/11/header-layout-05.png)