11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

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

ブログの顔、どう描こう。

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

いくみ
いくみ

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

結論から言います。

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

横幅:PC表示でのヘッダーの幅に大体合わせる。

縦幅:PC表示でのサイトのヘッダー高さの2割増しくらいにしておく。

*ピッタリでなくとも、⼤体そのくらいにするとうまくいきます。

私の場合、PC表示でのヘッダーの横幅が1261pxです。

縦幅は、220pxに設定してテストしました。(その後変更しています。)

すると用意する画像サイズは、横幅はそのままで、1261 px。

縦は2割増しなので、220 x 1.2 = 264

ということで、1261px x 264px 前後のサイズの画像を選ぶとピッタリです!

以下の条件にすべてあてはまる⽅は、同じサイズでいけると思います。

  • WordPress・Cocoonユーザー
  • サイト幅を⾃分で変更していない
  • ヘッダー⾼さを220に設定
当記事のポイント
  • この数値にたどりつくまでのテスト結果
  • ヘッダーサイズ(幅と⾼さ)の説明
  • ヘッダーサイズをはかれるツールの紹介
  • [Cocoon] 背景画像の設定⽅法
  • 画像選びのポイントとヘッダーサンプル
アイキャッチ画像は

PublicDomainPicturesによるPixabayからの画像

サイズテスト:縦幅「2割増し」をおススメしている理由

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

まずは、「ピッタリの画像サイズ」でテストしました。私の場合、1261px x 220pxです。

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

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

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

「携帯表⽰」の機種は以下の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。)

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

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

iPad landscape
横幅: 1024px

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

縮小率は約20%ですね。

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

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

テスト2:おススメサイズ (縦幅20%増し)

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

画像サイズ: 1261px x 264px

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

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

iPhone eXpensive portrait
横幅: 375px

さて、iPadの横表示です。

iPad landscape · 横幅: 1024px

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

いくみ
いくみ

OKですね!

soulfirephotography_によるPixabayからの画像

ヘッダーサイズとは?

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

ヘッダーの形や位置をCocoon設定などで変更している場合は、その範囲を測ることになると思います。

当ブログと同じく、ヘッダーの幅=サイトの幅になっている場合、⼀番広い範囲が表⽰されるPC表⽰で確認しましょう(拡大・縮小ズームしていない100%の状態で)。

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

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

同じPCでも、使用する機種の画面サイズでまた変わるようです。

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

ちなみに、当ブログのサイト幅を私のPCで測ると、1261pxです。

測定にはGoogle Chromeの拡張ツールPage Rulerを使用しています。

私は、サイト幅の変更とかできませんので、デフォルトの状態です。

WordPress・Cocoonで作ったブログで、サイト幅を変更していない場合、「私のPC環境」だと、1261pxになるはずです。

試しに、Cocoonユーザーブログを2つ選んで測定しましたら、やはり1261pxでした。

ヘッダーの高さは?

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

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

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

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

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

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

ヘッダーのサイズを測る方法:Google拡張機能 Page Ruler

このツールは、「Chrome」でサイト表示して使用する機能です。(似ているツールはもちろんあるはずですが、他のブラウザは非対応だそうです。)

インストール方法

1.ChromeからGoogleを開いて、「Google Chrome 拡張機能 Page Ruler」と検索します。

2.検索結果の1番上をクリックすれば、chromeウェブストアのページでPage Rulerが表示されていると思います。(表示されていなければ、chromeウェブストアのページでPage Rulerと検索しましょう。)

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

インストールできると、アドレスバーの右に、シャープのようなアイコン(↓)がでます。

使い方

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

2.先ほどのシャープアイコンをクリック。

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

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

anncaによるPixabayからの画像

[Cocoon] ヘッダー画像を設定する方法

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

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

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

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

すてきな画像を使ったサンプルと選ぶポイント

いくみ
いくみ

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

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

選ぶポイント1:「柄なし」「ほぼ無地」はかなり簡単。
例:空や海、砂、⽯、布素材、紙素材、⾦属の素材 などなど。

Sample 1:柄なし 解放感ある海の写真

画像のサイズ 1271 x 274 にリサイズ
作者:Free-PhotosによるPixabayからの画像
ファイル名:beach-691242_1920.jpg

選ぶポイント2:「パターン柄」や「全体柄」も簡単。
例:⽔⽟、チェック、1⾯の花や葉っぱ などなど。

サンプル2:パターン柄&全体柄 元気で明るいレモンのイラスト

画像のサイズ 1283 x 281 にリサイズ

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

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

選ぶポイント3:余白が多い画像も簡単。(「真ん中」や「ロゴ部分」があいている画像。)
例:被写体の数が少ない画像。

サンプル3:余⽩たっぷり シンプルできれいな花の画像

画像のサイズ 1283 x 281 にリサイズ

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

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

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

サンプル4:ひきの画像 遠近感ある花いっぱいの画像

画像のサイズ 1264×268 にリサイズ

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

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

選ぶポイント5:「アップ」や被写体が多い場合は、「ロゴスペース」だけは確保!
例:いろいろ。

サンプル5:「ロゴスペース」確保 おいしそうな朝ごはんの画像

画像のサイズ 1264×264 にリサイズ

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

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

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

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

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

おわりに

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

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

いくみ
いくみ

涙のスタート。

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

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

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

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

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

いくみ
いくみ

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

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

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

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

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

klimkinによるPixabayからの画像
いくみ
いくみ

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

コメント

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