【SANGO】記事一覧アイキャッチのサイズを統一するカスタマイズ【WordPress】

あんまり需要ないかも？とも思いつつ･･･(‘ω’)

テーマ「SANGO」での記事一覧のサムネイルサイズを統一するCSSを紹介します。

細長いアイキャッチも、このCSSをぽいと追記すれば画像編集もいらない！
でも既存のアイキャッチも拡大されちゃうので注意です。

横長の画像をアイキャッチにしたい

SANGOにおけるアイキャッチ推奨サイズは680×390です。（参考はPORIPU公式サイトさんより！）
でも、どうしてもそれ以下のサイズのアイキャッチを使いたい！
そんなときに使えるCSSです。

例えば、「500 x 200」っていうバナーみたいな縦横比の画像をアイキャッチに使ったら、デフォルトだとこんな表示になっちゃいます。

これを、こう表示させるCSSです。

Pixabay Imagesとかからアイキャッチ持ってくる人はあんまり関係ないカスタマイズですな。

CSSはこれ！

これを、SANGO子テーマのCSSファイルにペタリと貼り付けて終了です！

画像の大きさを調整したい場合は
height: 200px;
の部分をいじってください。

どんなコードなの？

気になる人のためにちょこっと解説タイム。

まず「height: 200px;」で、画像を拡大させてます。

それを、一番下にある「object-fit: cover;」
これではみ出た部分の画像をトリミングして、同じサイズっぽく表示させてます。

「height: 300px;」にした場合

すっごい拡大されてるけど、一定の範囲からははみ出さないよ！

「height: 70px;」にした場合

逆に縮小されちゃうぞ！

つまり、拡大してトリミング！

「記事一覧でサムネイル表示する範囲はここ！」と、もともと指定が入ってるので、その範囲を超えないための「object-fit: cover;」が入っているのです。

簡単にいえば、

ってことです。ふむふむ。