簡単いい感じ｜WordPressのヘッダー背景画像の余白問題を解決！

WordPressでヘッダーをカスタマイズする際に背景画像を設定したら、
下に余白ができてしまい、背景色が表示されてしまう
スマホでは正しく表示されるのに、
PCだとウィンドウサイズによっては余白ができる・・・。

私自身、Cocoonを利用しているのですが、
数分前まで背景画像のサイズを変えたりと苦戦しておりました

が、しかし！
サイズ調整はザックリでも、それっぽく見える簡単な方法を見つけましたので
今回、ご紹介いたします！

・今回結論 作成方法について

まず、結論です

WordPressのヘッダー背景画像を設定した際、
サイズや比率によってはヘッダーの下段部分に余白が生まれます
余白は設定している背景色が適用されます

また、表示する機器によって、縦横比は変わるため、
設定した画像は縦横に伸びることもあります
よって全ての機器に対応できる完璧を求めるより、
背景がベタ塗りよりはよく見える辺りを目指すことで、
簡単でいい感じを実現できると考えました

基本は、上から下にかけてのグラデーションが良いです
そこに、アクセントを散らす感じです
（ 桜の花びらや、星、ハートなどお好みで ）

あとは、ヘッダー背景画像を設定する際に、
背景色を背景画像の下段の色と合わせるだけで同化してくれます

以下の記事では、画像を用いてイメージを掴んでいただけるよう解説いたします

・背景画像について

この時、通常ですと縦横比や余白が欠けないサイズを探すために、
四苦八苦するのですが、その度にせっかく作った背景画像を修正するのは辛いですよね

なので今回は、適当なサイズで背景画像を作成します
（1920x220Pixel とか）

・画像作成時のポイント

画像の下の方を透明（あるいは背景色）にする

上図は、当サイトの背景画像です
下段のチェック柄部分が透明エリアです

余白ができることは承知の上で、
背景色に馴染むような画像を作ってください

・画像保存時の注意点

透明部分を含む画像の場合、保存はPNG形式で保存してください
（ JPEG画像では透明部分と認識できないためです ）
PNG形式の画像加工について、よく分からない方は、
画像作成の際、透明ではなく、背景色が下段になるように作成し、
いつもどおりの形式で画像ファイルを保存すればOKです

・Wordpressにヘッダー背景画像をセットしてみる

私の使用しているCocoon画面になりますが設定してみます

やることは、
ヘッダー背景画像の設定と、背景色の設定です
あとは設定を保存すれば、
余白の目立たない背景画像が適用されます

こんな感じで完成です

もし、写真など凝ったデザインを載せたい場合は、
背景よりもロゴ画像にデザインするほうが簡単です

「ヘッダー部分に帯がでてるなぁ・・・」 とお困りの方に
参考になれれば幸いです