「ヘッダーエリア全体に画像を表示させたいのに、うまくいかない……」
「ヘッダー画像エリアにしか画像が表示されない……」
そんな悩みを解決します。
ヘッダーエリア全体に画像が表示されないのは、設定場所が間違っているからです。
一つひとつクリアしていき、ヘッダーエリア全体に画像が表示できるようにしていきましょう。
それでは詳しく解説していきます。
ヘッダー画像が表示されない原因設定場所が間違っている
AFFINGERの設定項目がたくさんありすぎて、どこに画像を挿入すればいいのかわからない……という気持ちもわかります。
実際に僕も最初はわからなかったので、設定場所を間違えまくってました。
よくあるのは、ヘッダー画像エリアに画像を設定してしまうパターンです。
ここでヘッダーの高さも調整できるので、すべていけると思ってしまいがち。。。
まずはじめに、ヘッダーエリア全体に画像を表示させるためにはどこに画像を挿入すればいいのかを解説します。
画像を設定する場所は？
ヘッダーエリア全体に表示させる画像を挿入する場所は「headerエリア」です。
具体的には、カスタマイズメニュー「基本エリア設定」の中にある「headerエリア」です。
headerエリアの「画像を選択」をクリックし、ヘッダーエリア全体に表示したい画像を挿入します。
スマホにも表示したい場合は、下のスマホ（959px以下）「画像を選択」より挿入してください。
これでヘッダーエリア全体に画像を表示させるためのベースはできました。
しかし、 headerエリアに画像を設定するだけでは全体表示できません。
背景色または画像を削除する
- ヘッダーエリア
- PCヘッダーメニュー
この2つの背景を設定している場合は、ヘッダーエリア全体に画像を表示することができません。
なのでこの2つのエリアの背景色または画像を削除しましょう。
ヘッダーエリアの設定
ヘッダーエリアは、タイトルやキャッチフレーズを表示させているエリアです。
１．「基本エリア設定」を開き「ヘッダーエリア」を選択します。
２．背景色を設定している場合は、これをクリアします。
背景画像を設定している場合は削除してください。
PCヘッダーメニューの設定
PCヘッダーメニューは、ヘッダーエリアの下です。
ここにメニューを置いている場合は、背景色をクリアしましょう。
ここは色有りのメニューでもぜんぜんいいので、これはお好みで設定してください！
メニューの背景色をクリアする手順を解説していきます。
１． カスタマイズメニューの「-各メニュー設定」→「PCヘッダーメニュー」の順にクリック。
２．背景色をクリアにし、文字色は画像の上でも見える色を設定する。
これでメニューの文字だけが表示されるようになりました。
ヘッダーエリア全体に画像が表示させるようになったはずです。
ちなみに、PCヘッダーメニューは表示させずに、ヘッダーメニュー（横列）のみを表示させたい！ という場合は、こちらの記事を参考にしてください。
