[Cocoon] ヘッダー画像サイズと選ぶポイント

ブログの顔、どう描こう。
アイキャッチ画像は
PublicDomainPicturesによるPixabayからの画像

ヘッダーは、以下の⾚枠の部分です。背景画像をいれると、ブログの印象が⼤分変わります。

Cocoonブログのヘッダー
いくみ
いくみ

何回テストしたか分かりません・・・!

結論から言います。追記でちょっと長くなりましたが★。

ブログのヘッダー画像におススメのサイズ:

横幅:デバイスによって解像度が異なるため、どのサイズを重視するかで異なります。
最低でも1260pxはあるほうが良いです。個人的には今後、1400px以上にはしていこうかなと思っています。1920px, 2560pxモニターなどもありますので、大きめで良いと思います。

私はしばらく、1260pxくらいの画像を使ってました。それで大丈夫でした。が、1種類だけ、1920pxモニターで見たときに、少し画質が気になりまして。なので、大きめのが良いかなと。チョコっと気になった程度なのですけどね。5月のヘッダー画像横幅は、1480pxでした。1920モニターで見ても全然大丈夫でした。目立つデザインと、気にならないものがあるようです。

縦幅:PCの100%表示でのヘッダー高さの大体2割増しくらいにしておく。

これは、私のテストサイズでのおススメポイントです。

画像を設定したら、レスポンシブテストとResolution Testをクリックして、仕上がりを複数デバイス画面で確認しましょう。(あとで詳述しています。)

PCの100%表示での「ヘッダーエリアのヨコ幅」について

デバイスによってpx数はかなり異なります。

例えば、私の小さいノートPCで測ると、横幅1261 px。

他、大きなモニターで測ったら、1台は1660 px、もう1台は、1900 pxでした。

中には、2560pxのデバイスとかもあります。

大きめのpxにしておくと、画質に影響することはないでしょう。ただ、あんまり高画質にすると、表示の読み込み速度が気になるので、何を重視するかで変わります。

高さは、「キャッチフレーズの有無」や「ロゴ画像の高さ」が影響します。つまり、実際の高さが、設定した数値と異なる可能性があります。そのため、キャッチフレーズやロゴ画像を設定してから、ヘッダー部分の高さを測ることが大切です。ヘッダーエリアを測る方法は後述しています。

当記事のポイント
  • この数値にたどりつくまでのテスト結果
  • ヘッダーサイズ(幅と⾼さ)の説明
  • ヘッダーサイズをはかれるツールの紹介
  • [Cocoon] 背景画像の設定⽅法
  • 画像選びのポイントとヘッダーサンプル

ちなみに、ヘッダーの「レイアウト」については、以下で記事にしています。

サイズテストの結果

いくみ
いくみ

縦幅「2割増し」をおススメしている理由です。

テスト1:ピッタリサイズ

まずは、「ヘッダーサイズピッタリの画像サイズ」でテストしました。

私の環境の場合1261px x 220pxです。

どこまで表示されるかが分かるように、線をいっぱいひいた画像を使用しました。

Cocoon ヘッダ画像サイズテスト

結果です。すばらしく、ピッタリ!

Cocoon ヘッダ画像サイズテスト結果

テスト結果の携帯表⽰画像は、Cocoonのプレビュー画⾯の⼀番下に表⽰される「レスポンシブテスト」の リンクをクリックしてテストしています。

一番右にある[Resolution Test]も確認してみましょう。

Cocoon レスポンシブテスト、Resolution Test

「携帯表⽰」の機種は以下の2つです。
iPhone eXpensive 縦表⽰ (横幅: 375px)
iPhone eXpensive 横表⽰ (横幅: 734px)

「レスポンシブテスト」は、以下の携帯の場合も表⽰してくれます。横幅の数値が違う分、横の表⽰範囲は 異なりますが、少しの差なので、画像は省略しています。

Android (Pixel 2) portrait · 横幅: 412px
Android (Pixel 2) landscape · 横幅: 684px
iPhone 6-8 portrait · 横幅: 375px
iPhone 6-8 landscape · 横幅: 667px
iPhone 6-8 Plump portrait · 横幅: 414px
iPhone 6-8 Plump landscape · 横幅: 736px
iPad portrait · 横幅: 768px

ベストサイズ発見?、と思いきや、iPadの表示が以下のようになりました。(縦表示はOK。)

ピンクのラインと、グローバルメニューの間に空白ができてしまいました。

ムラサキの長方形はそれを示すために私が加えました

Cocoon ヘッダ画像サイズテストiPadのヨコ表示
iPad landscape
横幅: 1024px

つまり、iPadの横幅「1024px」にピッタリ合うように、1261pxの画像が縮小表示されているわけですね。縦横比を保って縮小しているため、「縦幅」も短くなり、足りなくなるのです。

縮小率は約20%ですね。

このiPad表示の変化があるため、縦幅は、「ヘッダーの高さ」に20%増ししたサイズで余裕を持たせるのがおススメです。

注:この2割増しは、横幅のpx数値によって変わると思いますので、ご自分が用意された画像で、レスポンシブテストをクリックして、各種デバイスの表示をプレビューで確認しましょう。

あまりに人気の機種なので、iPad表示は考慮したいですよね。

テスト2(縦幅20%増し)

ということで、次のテストサイズは1261px x 264pxです。縦幅を20%増しにしました。
一番下に、黄緑の長方形を加えています。

Cocoon ヘッダ画像サイズテスト 縦2割増し
画像サイズ: 1261px x 264px

パソコン表示は変化無しでした。うっすらと黄緑の線が見えますが、それは私の手作業の精度が良くなかっただけでしょう。

Cocoon ヘッダ画像サイズテスト 縦2割増し 結果

携帯表示は、先ほどリストしたすべての機種で、黄緑の長方形まで表示されました
1つだけ例を載せます。上と下の画像で、緑と⻘の線を確認すると、サイズ調整されていることが分かります。全く同じ⾒ た⽬にはなりません。

Cocoon ヘッダ画像サイズテスト 縦2割増し 携帯表示の結果
iPhone eXpensive portrait
横幅: 375px

さて、iPadの横表示です。

Cocoon ヘッダ画像サイズテスト 縦2割増し iPadヨコ表示の結果
iPad landscape · 横幅: 1024px

グローバルメニューの上に余白ができません。

いくみ
いくみ

OKですね!

Cocoon ヘッダー画像サイズと選ぶポイント
soulfirephotography_によるPixabayからの画像

ヘッダーエリアのサイズ

ヘッダーの幅は、私の場合は「⾃分のサイトの幅」になります。

ヘッダーの形や位置をカスタマイズで変更している場合は、その範囲を測ることになると思います。

サイズを測る際は、⼀番広い範囲が表⽰されるPC表⽰で確認しましょう(拡大・縮小ズームしていない100%の状態で)。

携帯のサイト幅にあわせて画像を選ぶと、PC表示したときに画像が拡大されすぎてイメージと違ってしまう可能性があ ります。

PC幅に合わせておけば、携帯表示したときに、左右がきれるだけで、画像が変なサイズに拡大されたりしません。

使用するデバイスによって、見え方は変わります。

そんなにものすごい誤差にはならないと思うので、とりあえずは、自分が持っているPCサイズでしっくりくる画像を設定しましょう。もしくは、高解像度対応にしておくと良いかなと思います。

ヘッダー部分の測定にはGoogle Chromeの拡張ツールPage Ruler Reduxを使用しました。(後述。)

ヘッダーの高さは?

ヘッダー高さは、[Cocoon設定] – [ヘッダー]タブにある、[高さ]・[高さ(モバイル)]で数値を設定できます。

当記事のテスト中はPCも携帯表示も220pxに設定していました。

ヘッダーの高さを小さい数値にしても、変わらない細くならない!と思ったら。

[変更をまとめて保存]ボタンを押し忘れていないか確認しましょう。

[キャッチフレーズ]を非表示にしてみましょう。同じ[へッダー]タブにあります。(キャッチフレーズを表 ⽰していると、⼀定の⾼さで縮⼩がとまります。)

[ロゴ画像]を指定している場合は、その高さも影響しているか確認しましょう。

ロゴ画像のサイズや、キャッチフレーズの有無によって、設定値通りの高さにならないことがあります。そのため、自分のヘッダーの高さを測ることが大切です。

ヘッダーエリアを測る方法

Google拡張機能 Page Ruler Reduxというツールが便利です。

Chrome」でサイト表示して使用する機能です。

インストール方法

1.以下のリンクをクリック。

2.[Chromeに追加]ボタンをクリックします。

3.すると以下のメッセージが出ますので、[拡張機能を追加]をクリック。

Page Ruler Reduxインストール

4.インストールできると、アドレスバーの右に、以下のようなアイコンがでます。

Page Ruler Reduxアイコン

使い方

1.測定したいサイトをChromeで表示します。

2.先ほどのアイコンをクリック。

3.サイトの上にマウスをもっていくと、ポインタがプラスサインになります。
測りたいエリアをドラッグで選択します。選択しているエリアのサイズデータが黒いバーに表示されます。以下の例では、「ブログカード」部分を測定しています。

Page Ruler Redux使い方

4.終了したいときは、再びアイコンをクリックです。

適切な画像サイズを確認したら、好きな画像のお気に⼊り部分を切り取って編集できますね!

anncaによるPixabayからの画像

Cocoon ヘッダー画像を設定

1.[Cocoon設定]をクリック。

Cocoon ヘッダー画像の設定方法

2.[ヘッダー]タブをクリック。

Cocoon ヘッダー画像の設定方法 Cocoon設定 ヘッダータブ

3.少しスクロールすると、[ヘッダー背景画像]セクションがあります。[選択]をクリックして画像を追加します。緑の下線をひいたオプションはお好みで。

ヘッダー背景画像

4.[変更をまとめて保存]ボタンをクリックすればできあがり!

ヘッダーサンプル・選び方

いくみ
いくみ

選んだ画像に合わせて、「キャッチフレーズ」を⾮表⽰にしたり、ロゴ画像の変更をし たりしています。

すべてのパターンに共通しますが、テスト中に私が設定した高さは220です。もっと高くすると、画像選びは簡単になると思います。

当記事のテストでは、私のPCのpx数に合わせた画像を利用しています。

そのため、横幅はそのままで大体1260 pxを使用。

縦幅は、220pxに設定してテストし2割増し(220 x 1.2 = 264)にしました。

以下の記事にも、ヘッダーのサンプルを載せました。

選ぶポイント1

「柄なし」「ほぼ無地」はかなり簡単。

例:空や海、砂、⽯、布素材、紙素材、⾦属の素材 などなど。

Cocoonヘッダーサンプル 選び方のポイント 柄なし、ほぼ無地
Sample 1:柄なし 解放感ある海の写真

ヘッダー画像のサイズ 1271 x 274 にリサイズ

ロゴ画像のサイズ 370 x 90

作者:Free-PhotosによるPixabayからの画像

ファイル名:beach-691242_1920.jpg

選ぶポイント2

「パターン柄」や「全体柄」も簡単。

例:⽔⽟、チェック、1⾯の花や葉っぱ などなど。

Cocoonヘッダーサンプル 選び方のポイント パターン柄・全体柄
サンプル2:パターン柄&全体柄 元気で明るいレモンのイラスト

ヘッダー画像のサイズ 1283 x 281 にリサイズ

ロゴ画像のサイズ 270 x 60

作者:DashaDeeによるPixabayからの画像

ファイル名:fruits-1193727_1920.png

選ぶポイント3

余白が多い画像も簡単。

例:被写体の数が少ない画像。(「真ん中」や「ロゴ部分」があいている画像。)

Cocoonヘッダーサンプル 選び方のポイント 余白多め
サンプル3:余⽩たっぷり シンプルできれいな花の画像

ヘッダー画像のサイズ 1283 x 281 にリサイズ

ロゴ画像のサイズ 355 x 60

作者:Yevheniia TsybulenkoによるPixabayからの画像

ファイル名:flowers-3956074_1280.jpg

選ぶポイント4

「ひき」の画像。

パノラマサイズで気に⼊るものがあれば、縦横⽐がヘッダーに似ているので、バラ ンスをとるのが簡単になると思います。でも、画像選びが簡単とは⾔えないデス。
例:被写体との距離がある写真。航空写真、パノラマ写真にも多い。

Cocoonヘッダーサンプル 選び方のポイント ひきの画像
サンプル4:ひきの画像 遠近感ある花いっぱいの画像

ヘッダー画像のサイズ 1264×268 にリサイズ

ロゴ画像のサイズ 370 x 90

作者:Jill WellingtonによるPixabayからの画像

ファイル名:pathway-2289978_1280.jpg

選ぶポイント5

「アップ」や被写体が多い場合は、「ロゴスペース」だけは確保!

例:いろいろ。

Cocoonヘッダーサンプル 選び方のポイント アップや被写体が多いとき
サンプル5:「ロゴスペース」確保 おいしそうな朝ごはんの画像

ヘッダー画像のサイズ 1264×264 にリサイズ

ロゴ画像のサイズ 355 x 60

作者:kinga strzelczykによるPixabayからの画像

ファイル名:bread-2349711_1280.jpg

「アップ」「被写体が多い」「ロゴスペースもない」という、難易度の⾼い画像を使い たい場合の編集ポイント。
・背景画像にバナーを⼊れる。(思い切りよく⼊れると、意外とかっこいいです。)

・背景画像全体をぼかす。(ぼかしを⼊れるソフトを使うか、元々、「背景部分」として映っていてピント が外れている部分を切り取るのもおススメ。)

・ロゴ画像の⽅に、⽂字が⽬⽴つような背景をつける。

・ロゴ画像の「文字」に白い縁取りなどの文字装飾をつける。

おわりに

私にとって、「ヘッダー画像サイズ」と「背景画像サイズ」の記事は、リベンジです。

WordPressを開設した初⽇に、「簡単だろう」と思って⼿を付けたのがヘッダー画像と背景画像だったのですが、「適切 なサイズ」が分からなくてホントに時間を無駄にしました。

いくみ
いくみ

涙のスタート。

ただでさえWordPress開設で疲弊していて、夫婦史に残るケンカの後でヘロヘロだったときで、判断⼒も鈍っていまし た。縦横⽐が全然ちがう画像をアップしてはガッカリの⾒た⽬を繰り返していました。

「簡単だろう」とイメージしたのは、⼦どものアルバムを作ったりするソフトと同じような操作でできるのかなと思って しまったからです。

アルバムソフトは、ドラッグ&ドロップやコピペ、マウス操作だけで、すごく簡単に思い通りの⾒た⽬になるんですよ ね。でも、ウェブサイトの画像設定というのは、操作⾯ではアルバムソフトのような柔軟性はないということが分かりま した。⾃分でちゃんと、どんな⼤きさの画像をどこに置くというのをどこかのファイルに数値で書くのだと思います。

もちろんコードが書けなくても、WordPressやテーマで⽤意されているオプションで設定できます。

その時に重要なのが、画像サイズを把握して、元々すてきな画像を選ぶこと。

いくみ
いくみ

そうすれば、⼗分満⾜な結果になると思います!

あの⽇の⾃分に⾒せたい記事の「⼤物2つ」を書き終わり、ちょっとスッキリしました・・・。

やはり⼤事なのは内容ですから、あまり⾒た⽬にこだわる必要はないのですが、「書くことないな〜」とか「書きたくな いな〜」なんて感じるとき、⾒た⽬で遊ぶと楽しいですよ。

どれくらい⾒た⽬にこだわりたいかというのは⼈それぞれです。

とにかくどなたかの参考になったら嬉しいです!

Cocoonヘッダー画像サイズと選ぶポイント
klimkinによるPixabayからの画像
いくみ
いくみ

ヘッダーのレイアウトについてはこちらで記事にしています。

いくみ
いくみ

ヘッダー画像の準備を楽にするためにするやり方を記事にしました!

ミニカスタマイズです。

いくみ
いくみ

「画像」は使わず、「色」だけ変更したり、「スキン」を利用して見た目を変える方法も記事にしています。

コメント

  1. ひげ より:

    すごいためになりました。

    wordpress始めたばかりで
    ヘッダーのサイズって?
    思い始めて色々なサイト見たんですけど
    基本的に基礎情報は知ってる体での説明なので
    ちんぷんかんぷんなものが多かったのですけど
    検証含めた説明がありとても参考になりました。

    • いくみ いくみ より:

      ひげさん、コメントありがとうございます!
      嬉しいお言葉です(^^)。
      新しい記事は少ないのですが、もしよろしければ他のページもご利用いただけたら嬉しいです♪。

タイトルとURLをコピーしました