ヘッダーエリアは、サイトの印象を左右する重要な要素です。Emanon Proでは、サイトのテーマにあった雰囲気にカスタマイズできます。

ヘッダー設定

WordPress管理画面 > 外観 > カスタマイズ > ヘッダー設定 > クリックすると、レイアウトデザインとグローバルナビの設定メニューが表示されます。

ヘッダー設定では、ロゴやキャッチコピーの配置位置、背景色の指定または背景画像の指定、ヘッダーエリアの高さ調整が可能です。

ヘッダーレイアウト設定とキャッチフレーズの表示位置

ロゴマーク(またはサイト名)の表示箇所を 左レイアウト、中央レイアウト、1行レイアウトの3つから選択することが可能です。「1行レイアウト」は、ロゴマークが左側、グローバルナビゲーションが右側に1行で表示されるレイアウトです。

キャッチフレーズの表示位置を左上、ロゴ(タイトル)下、表示なしから選択することが可能です。ロゴ(タイトル)下を選択した場合、「キャッチフレーズのフォントサイズ」の数値を変更することで、キャッチフレーズ文字の大きさを調整できます。

サイトタイトルのフォントサイズ

サイトタイトルのフォントサイズ

ロゴ画像を使用しない場合、サイトのタイトルが表示されます。サイトのタイトルは、文字のサイズを変更することができます。PCでの表示サイズと、スマホでの表示サイズをそれぞれ数値で設定してください。なお、ワードプレスの管理画面、設定の一般設定から変更が可能です。

ロゴサイズの高さ

ロゴ画像の大きさを調整できる機能です。スマホからサイトを見た場合のロゴがはみ出してしまうケースがあります。その場合、「ロゴの高さ:モバイル(最大値:60)」の数値を調整してください。(下記画像参照)

ヘッダーエリアの配色

ヘッダーエリアはキャッチコピーから背景色まで設定することが可能です。

  • キャッチコピー [背景色]:キャッチフレーズの表示位置が左上に指定している場合に有効です。
  • キャッチコピー[テキスト]:キャッチコピー文の色を調整できます。
  • サイトタイトル:ヘッダーロゴ画像が指定されていない場合に有効です。
  • 背景色:ヘッダーエリアの背景色を設定できます。
  • グローバルナビ(1行レイアウト用):ヘッダーレイアウト設定が1行レイアウトの場合に有効です。

ヘッダーエリア画像

ヘッダーエリア全体に背景画像を指定できます。背景画像の高さに合わせて、ヘッダーエリアの高さを調整することで見栄えを整えることができます。

下記は、背景画像をアップロードし、ヘッダーエリアの高さ196pxに設定した例です。

  • 背景画像:PCからサイトを見た場合に表示される画像です。スマフォ・タブレットからサイト用に画像をアップしたい場合、背景画像[モバイル]を使用します。
  • 背景画像[モバイル]:画像の指定がない場合、背景画像が適用されます。
  • ヘッダーエリアの高さ[PC]:ヘッダーレイアウト設定が左レイアウトと中央レイアウト時のみ有効です。
  • ヘッダーエリアの高さ[モバイル]:背景画像[モバイル]にアップした画像の高さに合わせます。指定がない場合は、ヘッダーエリアの高さ[PC]の指定数値が適用されます。

ヘッダーエリア設定のサンプル

上記画像は、以下の設定した場合のサンプルです。

  • ヘッダーレイアウト設定:「中央レイアウト」
  • キャッチフレーズの表示位置:「ロゴ(タイトル)下」
  • キャッチフレーズのフォントサイズ:16
  • 「背景画像」:アップロード ※背景画像[モバイル]は未使用
  • ヘッダーエリアの高さ[PC]:300
  • スポンサーリンク