どうもおはようポテトです。
WordPressの神テーマCocoonを利用していて多くの方が抱く疑問がこちら。
アイキャッチ画像のサイズってどのぐらいがいいの…?
ということで今回は
「具体的なアイキャッチ画像に適したサイズを教えて欲しい」
「そのサイズにするメリットも知りたい」
このような方に向けて「Cocoonにおけるアイキャッチ画像の最適なサイズ」について簡潔にまとめました。
ぜひ参考にしていただければ幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
Cocoonのアイキャッチ画像に最適なサイズ
いきなり結論から。
最適サイズ
1200×630px
このサイズになります。
1200×630pxにした方がいい理由・メリットとして以下の2点があります。
SNSで共有した際に見切れない
綺麗に写る
これだけだといまいちピンとこないと思うので具体的例と共に見ていきましょう。
SNSで共有した際(OGP画像)
TwitterとFacebookで記事を共有した際に表示されるOGP画像ですが、そのどちらにおいても1200×630のサイズだと見切れず綺麗に表示されます。
Twitterの場合
TwitterのOGP画像は二種類あるのですが、今回はメジャーなSummary Card with Large Imageの場合で考えていきます。
このカードの画像は、アスペクト比が2：1で、最小サイズが300×157または最大サイズが4096×4096ピクセルです。
(引用：image-twitterより)
その場合、2:1の比率が公式に推奨されておりほぼ同じ1200×630で問題ありません。
ソロモン
Facebookの場合
1.91:1の画像比(600 x 314ピクセルなど)を使用してください。
(引用：ベストプラクティス-Facebookより)
Facebookは1.91:1の比率を推奨しています。
昔は「1200×630がよい」と推奨する記述があったようですが今は無くなっています。
しかし1.91:1ということで1200×630とほぼ変わらず、こちらも問題ありません。
ブログ主
綺麗に写る
ブログ主が運営しているモンストのサイトでは最初320×180にして途中から変更したのですが、上のを見ても分かるようにやはり1200×630の方が綺麗ですよね。(当たり前だけど)
ブログ主
アイキャッチというのはファーストビューでほとんどの人が目にするものなので見栄えは大事ですね⸝⸝- ̫ -⸝⸝
画像が見切れてしまう場合の解決法
「アイキャッチ画像のサイズを1200×630にしたらなんか見切れるようになっちゃった…」という方は以下の方法を試してみてください。
インデックスのアイキャッチの場合
「Cocoon設定」→「全体画像設定」にいき、「Retinaディスプレイ」のON・OFFをいじってあげてください。
具体的には「ONにしてアイキャッチ画像を設定(アップロード)してOFFにする」、これで解決しない場合はその逆「OFFにして…」を試してみてください。
その他の箇所のアイキャッチの場合
add_image_size('w120_thumb', 140, 73, true);
add_filter('get_post_navi_thumbnail_size', 'w120_thumb_set');//前後の記事
add_filter('get_new_entries_thumbnail_size', 'w120_thumb_set');//新着記事
add_filter('get_popular_entries_thumbnail_size', 'w120_thumb_set');//人気記事
add_filter('get_related_entries_thumbnail_size', 'w120_thumb_set');//関連記事
add_filter('get_carousel_entry_card_thumbnail_size', 'w120_thumb_set');//カルーセル
function w120_thumb_set(){
return 'w120_thumb';
}カルーセルや新着記事といった、ヴィジェットで配置した箇所などのアイキャッチが見切れた場合は、上のコードをfunction.phpに記述することで解消されます。
あ、ファイルをいじる場合はバックアップしておくことをオススメします。
参考 Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集Cocoon
結論：サイズは1200×630にしておこう
以上となります。
サイトの第一印象…とまではいきませんがアイキャッチ画像はほとんどの訪問者が目にするものなので気を配っておきたいですね。
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
