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

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

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

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

サイズテストの結果

テスト１：ピッタリサイズ

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

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

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

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

ベストサイズ発見？、と思いきや、iPadの横表示が以下のようになりました。（縦表示はＯＫ。）

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

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

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

縮小率は約20％ですね。

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

テスト２（縦幅20％増し）

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

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

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

さて、iPadの横表示です。

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

ヘッダーエリアのサイズ

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

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

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

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

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

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

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

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

ヘッダーの高さは？

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

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

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

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

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

インストール方法

１．以下のリンクをクリック。

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

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

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

使い方

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

２．先ほどのアイコンをクリック。

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

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

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

Cocoon ヘッダー画像を設定

１．[Cocoon設定]をクリック。

２．[ヘッダー]タブをクリック。

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

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

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

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

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

縦幅は、220pxに設定してテストし２割増し（220 x 1.2 = 264）にしました。

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

選ぶポイント１

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

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

選ぶポイント２

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

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

選ぶポイント３

余白が多い画像も簡単。

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

選ぶポイント４

「ひき」の画像。

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

選ぶポイント５

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

例：いろいろ。

おわりに

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

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

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

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

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

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

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

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

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

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

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