PR 設定

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

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

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

完成イメージ
ヘッダーエリア各メニュー

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

  • ロゴ画像 / サイトのタイトル
  • ヘッダー画像
  • 基本エリア設定
  • PCヘッダーメニュー

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

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

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

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

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

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

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

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

ヘッダー画像 メニュー

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

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

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

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

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

基本エリア設定 メニュー

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

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

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

headerエリアの設定

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

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

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

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

2.「 headerエリア 」をクリック。

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

画像挿入前
画像挿入後

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

ヘッダーエリアの設定

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

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

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

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

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

注意

もしヘッダーエリアの「背景色」(グラデーション上部を含む)を設定している場合は、すべてクリアしてください。

※でないと画像がヘッダー全面に表示されません。

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

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

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

背景色あり

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

背景色なし

1.「ヘッダーエリア上の背景色」と「ヘッダーエリア上の背景色(右)」の2箇所の色をクリアします。

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

PCヘッダーメニュー

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

  • PCヘッダーメニューの背景色をクリアにする
  • テキスト色を変更する
  • 縦線を入れる(これは好みで)

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

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

2.「PCヘッダーメニュー」をクリック。

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

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

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

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

ここでは白(#ffffff)を選択しています。

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

まとめ

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

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

  • サイトタイトルとキャッチフレーズは画像にかぶらない色に変更する
  • ヘッダー画像エリアの高さを500前後に設定する
  • 「headerエリア」の設定で、ヘッダーに表示したい画像を設定する
  • 「ヘッダーエリア」の設定で、ヘッダー横メニューのテキスト色を変更する
  • ヘッダー画像エリア上にコンテンツがある場合は、背景をクリアにする

これだけでOKです。

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

では!

-設定
-

PAGE TOP