ブログアイキャッチのサイズは正方形で作成！表示はCSSで調整すればOK！

ブログを運営する上で、アイキャッチのサイズ……悩みませんか？？

結局のところ、どのサイズで作ればいいのか。
どういった作り方をすれば、あらゆるシーンで問題なく表示されるように出来るのか。きっと、お悩みの方は多いかと思います。わたしもです。

悩みに悩んでわたしが辿り着いた結論は、「正方形で良くないか？」でした。

何故、正方形という結論に辿り着いたのか、そして正方形だとどうしても発生する記事表示での間延び問題を解決するCSSについて、ご紹介します。

一般的に言われるブログアイキャッチの最適サイズ

一般的に、ブログアイキャッチの最適サイズを調べると、よく見かけるのは、

あたりになるかと思います。

これは、SNSなどで使用される場合などを考慮したサイズになります。

といった条件に従った場合、大体これぐらいに落ち着くといった定説になっているのではないかと思います。現にわたしも、それに従っていました。

横長アイキャッチを作成した場合、たとえ比率を正確に守っていたとしても難点がひとつあります。
その難点とは、Google検索結果で表示された場合や、LINEなどのアプリで共有された場合は正方形で表示されるということです。

横長のアイキャッチを正方形で表示されると、何が問題なのかと言うと。

たとえばこういうアイキャッチがあった場合、正方形で表示されると、

こうなります（ちょっと表示縮小してます）。

肝心のタイトルが切れていて、内容が伝わらないものになってしまいますね。
アイキャッチの意味がなくなってしまいますし、不格好と言われたら確かにそうだと思います。これが、横長アイキャッチの最大のデメリットだと思います。

アイキャッチを作成する際に、正方形表示まで意識すると文字を入れられるゾーンは、中央の部分だけになってしまいます。サンプルのアイキャッチは1200px×630pxですので、630px×630pxの正方形におさめなければなりません。

真ん中の黒枠がセーフティーゾーンになりますが、思ったより狭いんですよね、これ。
以前はこの方式で何とかしようとしていましたが、横書きでタイトルなどを入れようとすると、非常にやりにくく感じられました。

しかも、せっかくブログの記事のアイキャッチとしては長方形で表示させているのに、左右のスペースは完全に無駄になってしまいます。

いろいろ考えた挙句、作成したアイキャッチは正方形でした。

正方形でアイキャッチを作成する最大のメリットは、レイアウトのしやすさです。

正方形でアイキャッチが表示される場合は、そのまま表示されます。
横長でアイキャッチが表示される場合は、上下がトリミングされて表示されます。

従って、レイアウトする範囲は以下になります。

これなら、横書きのタイトルもレイアウトしやすいです。

また、通常の横長で表示する場合にも、横長で正方形表示を意識してレイアウトすると中央に縮こまった表示になってしまうのですが、正方形で作成しておくと横長でもキレイに見えます。

正方形でアイキャッチを作成するデメリットとしては、そのまま表示すると縦に間延びすることです。

インデックスページでは敢えて正方形で表示させるデザインでも良いでしょうが、記事表示となるとアクセスしてから記事に辿り着くまでのスクロールが長くなってしまい、閲覧者にとって邪魔な空間となってしまいます。

ですので、記事表示ではアイキャッチの上下をCSSでトリミングして表示させます。

あとは、正方形表示の際に文字が小さく見えてしまうことですが、切れて読めないよりはマシかな……という。

記事表示の際にアイキャッチの上下をトリミングするには、以下のCSSを適用させます。

.eye-catch-wrap img {
  height: 21em;
  object-fit: cover;
}

高さについては、ご利用の環境に合わせて調整してください。

但し、モバイル環境での閲覧でずれるという場合は、それぞれ指定する必要があります。

@media screen and (max-width: 520px) {
  .eye-catch-wrap img {
    height: 16em;
    object-fit: cover;
} }

ブレイクポイントや、高さ指定については、こちらも調整してください。

アイキャッチサイズを模索し続けた結果、正方形に辿り着いた理由と表示方法のご紹介でした。

まとめ

ちなみにわたしは、当ブログでは1280×1280pxで作成しています。何かすごく楽になりました。

アイキャッチサイズの正解って難しいです。
正方形表示するプラットフォームがなくなったら、この記事も全くの無駄になるわけですし。

どれが正解かは分かりませんが、わたしはこれがやりやすいと感じました。