SWELLカスタマイズ｜記事一覧のアイキャッチサイズを自由に変更する

SWELLの要望フォーラムに記事一覧のアイキャッチサイズのアスペクト比を追加して欲しいという要望がありました。

記事一覧リストのサムネイル画像の比率、現在でもたくさんの種類があるのですが
「1.91:1」を追加いただくことは可能でしょうか？

現在、ブログのアイキャッチ用とOGP用に、比率の違う画像を毎回2枚ずつ作成しているので
アイキャッチとOGP画像が兼用できればありがたいなと思いました。

ご検討いただけますと幸いです。

https://users.swell-theme.com/forum/swell-request/%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e7%94%bb%e5%83%8f%e3%81%ae%e6%af%94%e7%8e%87%e3%81%abogp%e7%94%a8%e6%af%94%e7%8e%87%e3%82%92%e8%bf%bd%e5%8a%a0/

ブログのアイキャッチとOGP用に2種類作成しているという部分が難解ですが、そこは無視してSWELLの仕組みとして画像比率を自由に変更する方法について、ご紹介したいと思います。

『1.91：1』の画像比率はなぜ必要か？

SNS『Twitter』や『Facebook』でウェブサイトのリンク（URL）を共有した際に、読み込まれる画像サイズのアスペクト比が「1.91：1」に統一されました。

OGPに画像を設定する場合、この「1.91：1」サイズにしておくとTwitterとFacebookの両方でキレイな画像をユーザーに見せることができます。

https://note.com/digimaga/n/nb7a3ade17420

上記は、1.19:1の画像サイズを持つ画像を用意しろと言う意味ではなく、1.19:1で表示したときに見た目が整っている、必要な情報が切れない画像を用意しなさいと言う意味です。

SWELLの投稿一覧のアイキャッチサイズ

SWELLはカスタマイザーで投稿一覧のアイキャッチサイズをかなり自由に選択できます。

4つの型に対して独立して、7通りの画像比率が設定できるようになっています。

• 白銀比率(1:1.414)
• 黄金比率(1:1.618)
• 一眼(3:2)
• ワイド(16:9)
• 横長(2:1)
• 超横長(5:2)
• 正方形(1:1)

SWELLの投稿一覧のアイキャッチサイズをカスタマイズ

私の環境で確認したところ、これらの画像比率はCSSでインラインでCSS カスタムプロパティとして出力されているようでした。

:root{
--card_posts_thumb_ratio:56.25%; /* カード型リストでの画像比率 */
--list_posts_thumb_ratio:61.8%; /* リスト型リストでの画像比率 */
--big_posts_thumb_ratio:56.25%; /* サムネイル型リストでの画像比率 */
--thumb_posts_thumb_ratio:61.8%; /* ブログ型での画像比率 */
}

好きな値に書き換えてあげてカスタマイズ⇒追加CSSにコピペすれば、優先順位的に上書きできると思います。

1.91:1の比率だと、52.3%にすれば良さそうですね。

まとめ

SWELLの投稿一覧のアイキャッチ画像は、表示する時のアスペクト比をCSSで調整しているだけですので、アスペクト比を変更したからといって、そのサイズのサムネイル画像を作っているわけではありません。

SWELL本体として、現在ラインナップされていない画像比率を追加したとしても、単純にCSSカスタムプロパティの値が変わるだけです。

ですので、今回のCSS経由のカスタマイズで同じ動きになると思います。