WordPressテーマの「Cocoon」を使っているけど、ヘッダー画像の両端に隙間ができ、画面ピッタリにならないと困っている人いませんか？
ヘッダー画像というと背景の画像に文字が書いてあるものを想像するのではないでしょうか。決して間違っているということではないですが、実はヘッダー画像は「背景とロゴ」で別々のモノが重なっているんです。
本記事では、Cocoonテーマでヘッダー画像が画面ピッタリにならず、両端に隙間ができてしまう原因とカスタマイズする方法について紹介します。
ヘッダー画像の両端に隙間ができる原因
ヘッダー画像がパソコン・タブレット・スマホの画面ピッタリにならない原因としては2つ考えられます。次のいづれかの可能性が高いです。
2. 設定が誤っている
自分では間違えていないと思っていても、意外と間違っている場合が多いです。一度見直し、カスタマイズしてみましょう。
理想的なのは、「1920×1080」ぐらいの画像をもとにヘッダーサイズに切り取ると良いです。これよりも小さくても画面ピッタリにできますが、低解像度よりも高解像度の画像を使用した方が加工の自由がききます。
画像サイズが小さい
パソコン・タブレット・スマホにより端末の画面サイズは異なります。スマホでプレビューしながらヘッダー画像を設定しピッタリだったとしても、パソコン・タブレットなどスマホより大画面でみると両端に隙間が空いてしまうことがあります。
ヘッダー画像サイズが小さく、PCなど画面が広いデバイスでは端まで届いていないため、両端に隙間が空いてしまいます。
パソコンの画面サイズを意識した画像をもとにヘッダー画像をカスタマイズすることで、スマホ・タブレットで見ても画面ピッタリとなります。
画像サイズをを見直してみたけど、まだ両端に隙間があるという人は設定が誤っている可能性があります。
設定が誤っている
画像サイズは大きく問題ないが両端に隙間ができてしまう場合は、設定が間違っている可能性が高いです。
Cocoonの設定を確認するとこのようになっていたりしませんか？
WordPress管理画面⇒Cocoon設定⇒ヘッダーを表示し、以下設定を確認して下さい。
2. ヘッダー背景画像しか設定していない
上記に当てはまる人は、背景画像に文字を追加してヘッダー画像を作って設定してしまっていませんか？ヘッダー画像をピッタリにするには別々に作成して設定が必要です。
前述で述べた通りヘッダーはロゴ画像と背景画像の2つで構成されています。背景画像はただの背景ですが、ロゴ画像はクリックするとサイトのホームへ飛べるボタンとなっていたりします。今後修正する可能性も考えると別々の方がメリットが高いと言えます。
ヘッダー画像を画面ピッタリにカスタマイズする方法
前述で述べたヘッダー画像が画面ピッタリにならない原因に対しての対策について紹介していきます。前提として、小さい画像ではできませんので「1920(横)×1080(縦)」程度の画像を用意して下さい。※縦に関しては、最低300あれば大丈夫です。
ヘッダーロゴを作成する
「ヘッダーロゴ」はこの部分になります。以下の画像では背景画像と一体になっているように見えますが、背景の上の「文字」部分がヘッダーロゴになります。
ここでは「ロゴ」となりますので、サイト・ブログのタイトル名とするなら「文字」になるので、背景がない方がキレイに見えます。またアイコンなどに関しても、背景が目立つものは避けた方が良いでしょう。
背景があるとこのようになってしまいます。とても見栄えが悪いです。
ロゴは文字通りロゴとなりますので、以下のように背景を無くして作成しましょう。
ヘッダー背景画像を作成する
ロゴは先程作成しましたので、そのロゴの背景画像を作成します。
「ヘッダー背景」はこの部分になります。画像の大きさは「1600×300」のサイズが丁度良いです。画像サイズが小さすぎるのはNGですが、大きさに正解はないので好みのサイズにトリミングしましょう。
ヘッダー画像の設定
WordPress管理画面のCocoonへ設定で作成したヘッダーを設定します。
WordPress管理画面⇒Cocoon設定⇒ヘッダーを開きます。
「ヘッダーロゴ」と「ヘッダー背景画像」の設定を行い、「変更をまとめて保存」をクリック
これで、ヘッダー画像の両端の隙間が無く、画面ピッタリになります。やはり画面ピッタリの方が見た目がキレイですよね。
まとめ
今回の記事をまとめます。
・見るデバイスによって表示が異なるので意識しよう。
・ロゴには余計な背景を入れないようにしよう。
・ヘッダーのロゴと背景は別物。
・変更が反映されていない時は、キャッシュのクリアをしよう。
コメント