目次
CSSでSANGOの関連記事の画像サイズを揃える
同じ大きさの画像を使っていればサムネイル画像は揃っています。
少しくらい画像サイズが違っていても横長の長方形なら画像がばらつきません。
でも、正方形の画像を使ってたりすると画像が揃わなかったりします。
ちょっと強引な方法だけど、SANGOの関連記事のサムネイル画像を揃えることができます。
追記するだけで、サムネイル画像を揃えることができる
CSSに追記するだけで関連記事のサムネイル画像を揃えることができます。
ただ、タイプA以外だとサムネイル画像と記事タイトルの余白を調整しなければいけないです。
つまりタイプAがおすすめってことです。
パソコン表示だと横長の長方形なんです。
スマホだと正方形なんです。
※ この記事を書いた時点ではスマホではプラグインのYARPPで関連記事を表示しています。
関連記事の画像サイズを揃えるカスタマイズ
.related-posts img {
width:220px!important;
height:150px!important;
object-fit: cover;
}
追加CSSに上記をコピペするだけです。
!important;を使って強制しなくても反映するかもしれません。
けど、最初から強制しちゃってます。
サムネイルの画像サイズは、調整が必要！
SANGOのタイプAで６記事表示するなら横幅は220pxがいいです。
横幅220pxだとパソコンでは3列を2行で表示されます。
数字を変更して微調整してくださいね。
スマホだと、正方形になってきれいに2列で3行の表示できます。
サムネイル画像を再作成するといい
上記を追記すれば、SANGOの関連記事のサムネイル画像サイズが揃います。
プラグインのRegenerate Thumbnailsで何度かサムネイルを再作成して調整しました。
問題なくてもサムネイルを再作成してください。