WordPressでテーマCocoonを使っているんだけど、
- ヘッダーとヘッダーロゴって違いは？
- ヘッダー画像はサイズどれくらいにしたらよいの？
- パソコンでヘッダーを画面いっぱいに広げるにはどう設定したらよい？
当記事では、こんな疑問を解消します。
こんにちは、タズキ（@tazukiblog）です。
ワードプレスのテーマ「Cocoon」のヘッダーを設定するときに、自分の思った通りに表示させるには、どのサイズでヘッダー画像を用意すればいいのか迷いますよね。
CSSはいじらずに、元からあるCocoon設定だけで、様々な表示方法が可能です！
ほんとのところ備忘録用ブログ！
【Cocoon】ヘッダーとロゴの適正サイズは？思った通りに設定する！
パソコンでヘッダー画像を画面いっぱいに表示するには？
用意する画像のサイズは、どの大きさの画面で見ることを基準にするかで違います。
ヘッダー：横1900ピクセル × 縦○○ピクセル（お好きなサイズ）
ヘッダーロゴ：横1200ピクセル以下 × 縦ヘッダー以内
23.8インチのパソコンを使っていると画面いっぱいの画像は横が1900ピクセルです。
ヘッダー
ヘッダーはそのサイズ（横1900）がないと、画像が引き延ばされてボケてしまいます。
※パソコンによってサイズは違うので、23.8インチのPCの人が見たら1900が良いと思っていてください！
縦は自分のサイトの目的や好みに合わせて好きなサイズにしましょう。
当ブログ(Tazuki Blog)では、1900×200のヘッダー画像を使っているよ。
ヘッダーロゴ
一方、ヘッダーロゴは、ヘッダーより小さくないとはみ出してしまいます。
しかし、ヘッダー設定のところで表示させる画像の表示サイズを変えられるので、画像を用意する時点で厳密にサイズを決める必要はありません！
ここで注意点！
ヘッダーとヘッダーロゴの高さをぴったしにするには、
に設定する必要があります。
当ブログ（Tazuki Blog）の場合、ヘッダーの高さが200なので、÷1.2で、166ピクセルです。
なので、ヘッダーとヘッダーロゴを同じ高さで設定すると、ヘッダーロゴがヘッダーの下にはみ出して不格好になります。
僕は、750×200で書き出したヘッダーロゴをCocoon設定で583×166にして使っているよ！
ヘッダー画像作成の注意点
必ずヘッダー・ヘッダーロゴどちらの画像もサイズを圧縮しましょう。
TinyJPGは無料で簡単に画像圧縮がきるのでやってみてください！
ちなみにヘッダー以外にもブログ内全ての画像で圧縮に使っているよ！
【Cocoon】ヘッダーとロゴの適正サイズは？思った通りに設定する！まとめ
Cocoonでは単純に、1つのヘッダーだけでなく、ヘッダーとヘッダーロゴといった2種類の設定することができます。
また、画像を設定しないで単色で好きな色の背景を設定するもよし！
使いこなしておしゃれなブログヘッダーを作りましょう！
そして、ヘッダーロゴの画像はどのページでも表示される大切なもので、言わばあなたのサイトのイメージです！
毎回表示されるので、ページスピードにかなりの影響があります。
画像はできる限り圧縮して容量を減らして使いましょう！
コメント