Fun funny daysではOPENCAGEが提供するSTORKというWPテーマを使用しています。
多くのブロガーさんが利用しているため、既視感がある方も多いのではないでしょうか？
- デザインのカスタマイズが非常に簡単
- 記事を書く上で役立つショートコードが多い
- SEO対策もテーマ側でバッチリ組み込まれている
これらの点から、わたしも重宝させていただいております。
しかし、１つ気になることがあって…
アイキャッチ画像を作りこむと、見切れる。
色んな場所に表示されるアイキャッチ画像、どういうトリミングがされているのか気になりましたので実験してみました。
Contents
実験テーマ
こちらの画像をアイキャッチに設定して、各場所でどういう風に表示されるかチェックしました。
1200px×600pxのJPEG画像です。1マス大体50pxです。
Facebook等、いろいろなメディアに引用されたときの見栄えを気にすると上記サイズがベストと聞いたので、このサイズでテストしています。
結論から言うと、場所によって見切れ方に差がありました。
デザインにこだわる方は、その特徴を踏まえたアイキャッチ画像の設計をした方がいいと思います。
STORK アイキャッチ画像表示（PC）
目視でチェックします。
（正確なサイズを測る方法がわからなかったので…）
Topページ for PC
ざっくりサイズは、横1000px、縦600pxです。
左右均等にトリミングされていますね。
前後の投稿 for PC
記事下に表示される小さなサムネイルです。
ざっくりサイズは、縦横600pxの正方形です。中心からトリミングされています。
RECOMMEND for PC
ざっくり…横は900px、縦は550pxより少し小さいかな？
上に詰めてトリミングされているため、下の方に文字とか書くと見切れますね。
記事下の関連
サンプル記事が関連に出なかったので、別方法で紹介します。涙
元の画像がこちら。
関連記事の表示がこちら。右端のFun funny days案内の部分です。
横長の画像を使っているのですが、うまいこと中央からトリミングされていますね。
サイズは測定できず、ごめんなさい。
「こんな感じで切り取られるんだ」というフィーリングで察知お願いします。
Twitter for PC
こちらもサンプル記事をツイートする勇気足りず別の方法で。
これが…
こうなりました。
ぱっと見ですが、左右は大して削られておらず、上下が均等にある程度減ってます。
まとめ
メディアの種類や、ブログ内の表示場所によって、トリミングのルールが異なることが分かりました。
うすうす感じていたことが検証されてスッキリです。
上下／左右ともにカットされてしまうエリアがあるため、アイキャッチ画像に文字を入れる場合はレイアウトに注意した方がよさそうです。
本当は縦横の比率でまとめられると良いんだけど…
まずは、これくらいのザックリ結果で感覚を磨いてみようと思います★(逃げた)
スマホ版も更新します。
