【選べる】ページヘッダー 12パターン

ページヘッダーのスタイルを以下の中からお選びいただけます。

ページヘッダーのスタイルはサイト全体で共通です。

① 格子 薄め

格子の色は キーカラー に透過を設定したものになっています。

② 格子 濃いめ

格子の色は キーカラー に透過を設定したものになっています。

③ 水玉 薄め

水玉の色は キーカラー に透過を設定したものになっています。

④ 水玉 濃いめ

水玉の色は キーカラー に透過を設定したものになっています。

⑤ 斜線 薄め

斜線の色は キーカラー に透過を設定したものになっています。

⑥ 斜線 濃いめ

斜線の色は キーカラー に透過を設定したものになっています。

⑦ 背景塗りつぶし

背景色は キーカラー になっています。

⑧ 背景塗りつぶし

背景色は カスタムカラー 1 になっています。メインの キーカラー と異なる色にしたい場合は ⑦ ではなく、こちらをお選びください。

⑨ グラデーション

グラデーション色は キーカラー がベースになっています。

⑩ 背景に画像 黒文字

お好みの画像をご用意ください。横長で明るめの画像が望ましいです。
【画像の幅】1900px程度　【画像の高さ】600px～800px程度

⑪ 背景に画像 白文字

お好みの画像をご用意ください。横長で暗めの画像が望ましいです。
【画像の幅】1900px程度　【画像の高さ】600px～800px程度

以下のように、背景画像を別のものにして、さらにページタイトル部分をぼかすこともできます。

⑫ 背景に画像 グラデーション

お好みの画像をご用意ください。横長で明るめの画像が望ましいです。
【画像の幅】1900px程度　【画像の高さ】600px～800px程度

グラデーションが自動設定されますので、ご用意いただく画像にグラデーション処理は不要です。

背景画像（写真）の差し替え手順

ページヘッダーの背景に画像（写真）が使われている場合、WordPress のメディアに画像をアップロードして、[カスタマイズ] → [追加 CSS] に以下のコードを追加すると背景画像を差し替えできます。

body .page-header {
    background-image: url(アップロードした背景画像の URL);
}

被せる色の濃さを調整したいときは以下のコードを追加します。※opacity を 0～1 の範囲で指定。

body .page-header::before {
    opacity: 0.5;
}

ページタイトル部分をぼかす手順

[カスタマイズ] → [追加 CSS] に以下のコードを追加するとページタイトル部分をぼかすことができます。

body .page-header-inner {
    backdrop-filter: blur(3px);
    padding: 1em 0.5em;
}

@media (min-width: 992px) {
  body .page-header-inner {
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 5px rgba(255,255,255,0.15);
  }
}

@media (min-width: 1200px) {
  body .page-header-inner {
    backdrop-filter: blur(15px);
  }
}