ヘッダーエリア全体に画像を設定する方法

ここでは、ヘッダーエリア全体を画像にする方法を解説していきます。

ヘッダーエリア全体に画像を反映させると、トップページのヘッダーはこんな感じになります。

ヘッダー全体を画像にするためには、「カスタマイズ」にて以下メニューの設定が必要です。

それでは一つひとつ手順を解説していきます。

ロゴ画像/サイトのタイトル メニュー

ここでは、ロゴ（サイトタイトル）とキャッチフレーズの色を変更します。

ロゴ画像を設定している場合は、ヘッダー画像に埋もれないような色に変更しましょう。

１．WordPressのダッシュボードを開き、「外観」→「カスタマイズ」の順にクリックします。

２．カスタマイズメニューの「ロゴ画像/サイトのタイトル」をクリック。

３．サイトタイトルとキャッチフレーズの「色を選択」をクリックし、画像にかぶらない色を選択します。

当サイトの例でいうと、画像が黒ベースなのでロゴとキャッチフレーズの色を白（#ffffff）にしています。

ヘッダー画像 メニュー

次に、 ヘッダー画像エリアの高さを指定します。

デフォルトの高さ（300px）では少し物足りないので、ヘッダーエリアの高さは変更しておいたほうがいいです。

１．カスタマイズメニューの 「ヘッダー画像」をクリックします。

２．ヘッダー画像エリア最低の高さを「550」に変更します。

500px 前後が扱いやすいと思います。

基本エリア設定 メニュー

基本エリア設定は、ヘッダーに関する設定が4つあります。

1. headerエリア
2. ヘッダーエリア
3. ヘッダー画像エリア上/下ウィジェット
4. ヘッダーカードエリア

ヘッダーエリア全面を画像にするためには、ここがキモだと言えるぐらい大事な設定なので、詳しく解説していきます。

headerエリアの設定

「headerエリア」とは、ヘッダー ～ ヘッダー画像下エリアまでの、ヘッダー全体のことです。

先ほど設定した「ヘッダー画像エリア」がこれにあたります。

ここに表示したい画像を「headerエリア」にて設定していきます。

１．まずはカスタマイズメニューの「基本エリア設定」をクリックします。

２．「 headerエリア 」をクリック。

３．「画像の選択」をクリックし、ヘッダー全体に表示させたい画像を挿入する。

４．header内の文字を見えやすくするために、「背景画像を暗くする」にチェックを入れておきます。

ヘッダーエリアの設定

ヘッダーエリアで変更するのは「電話番号とヘッダーリンク」の色の変更のみです。

ここを変更することで、ヘッダー横メニューのテキスト色が変わります。

１．「基本エリア設定」内メニューの「ヘッダーエリア」をクリック。

２．一番下までスクロールし、「電話番号とヘッダーリンク」の色を選択します。

当サイトでは白（#ffffff）を選択しています。

ヘッダー画像エリア上/下ウィジェットの設定

ヘッダー画像エリア上に文字やボタンを表示させたい場合以外は、背景色をクリアしておきます。

文字を挿入し背景を設定するとこんな感じになります。

背景をクリアするとこんな感じになります。

１．「ヘッダーエリア上の背景色」と「ヘッダーエリア上の背景色（右）」の2箇所の色をクリアします。

これで背景色がなくなり画像が表示されるようになりました。

PCヘッダーメニュー

最後に、PCヘッダーメニューの設定をします。

この手順を解説していきます。

１．カスタマイズメニューの「- 各メニュー設定」をクリック。

２．「PCヘッダーメニュー」をクリック。

３．背景色を設定している場合は、「クリア」を押して背景色をクリアします。

クリアするのは背景色だけでOK。（グラデーション上部はそのままでも大丈夫です）

４．テキスト色が画像の色とかぶってしまう場合は、ここも変更します。

文字色の「色を選択」をクリックし、メニューのテキスト色を変更します。

ここでは白（#ffffff）を選択しています。

これでヘッダーエリアに表示されている各項目がすべてクリアされました。

まとめ

今回は、ヘッダーエリア全体を画像にする方法の手順を解説しました。

手順を簡単にまとめると、

これだけでOKです。

もしわからないところ、うまくいかないところがあれば、お気軽にコメントください。

では！