アイキャッチ画像を作成しようと思った時、真っ先に知っておきたいのは画像比率・サイズです。
公式サイトなどでも画像サイズを言及していないことが多く、ネットで検索しても微妙に違っていて迷いました。
ここではSWELLユーザー用のアイキャッチ画像の推奨サイズを調べ、実際に色々検討した結果です。
アイキャッチ画像サイズ
SWELLテーマのアイキャッチ画像のサイズ・比率は、1200✕630 (1.91:1) がおすすめです。
いきなり結論からですが、理由は、SNSでシェアした時に推奨されているサイズなので何かと便利だからです。
ただ、1200✕630のサイズめいっぱいに作ると、SWELLでは投稿リスト時、左右が切れます。
実例をお見せしますね。
これはCanva Pro
で作成し、サイズは1200✕630（19.1:1)です。
記事先頭のアイキャッチ画像にはそのまま全部表示され問題ないですが、投稿リストを見るとこのように左右が切ています。
なぜかというと、投稿リストではサムネイル画像の推奨サイズが1200✕675（16:9 )だからです。
画像比率が違うんですよね。でもだからといってこちらの 1200✕675(16:9)で合わすとSNSシェアのときに１部分が切り取られます。
対策としては、作成時に重要な部分を真ん中に寄せることで解決します。
mameどれだけの範囲で内容を真ん中に寄せたらいいの？
左右が切り取られていたから、幅の調整が必要。
比率から割り出すとして…
？px（幅) : 630px(高さ)=16：9（投稿リストに表示される比率）
で、幅のピクセル数を計算してみると、幅は1120pxの範囲で作成すればいいことになります。
ですが、実際設定してわかったんですが、カテゴリーページのリスト型に設定すると、それでも左右が見切れてしまったので、比率計算に頼らず、下記のサイズにしたところ、サムネイル表示がきれいに収まりました。
結果、おすすめのSWELLのアイキャッチ画像の作成はこうです。
画像サイズは1200✕630px
中身は高さは630pxのままでいいが、幅を真ん中を中心に1000pxの範囲におさめる。
（↑わかりやすいように、背景をつけています。）
そうすると、投稿リストでもこのように希望していた四角の枠つきアイキャッチ画像で表示されます。
1200✕630の画像なんて重いよ〜と思われる方は比率を計算して左右などが見きれないようにアレンジしてくださいね。
ちなみに、外観/カスタマイズ/記事一覧リストからサムネイルの画像比率は変更できます。
参考サイト
今回大変参考にさせていただいたページをご紹介します。SWELLのあらゆる画像サイズ・比率などについて深い内容です。
