SANGOで関連記事の画像を揃える方法
同じ大きさの画像を使っていれば、サムネイル画像は揃っています。
少しくらい画像サイズが違っていても、横長の長方形なら画像がばらつかないと思うんです。
でも、正方形の画像を使ってたりすると、画像が揃わないことがあるんです。
そんな場合、ちょっと強引というか、無理矢理な方法だけど、SANGOの関連記事のサムネイル画像を揃えることができます。
使う画像サイズは揃えよう！
同じサイズが一番！
正方形が良くない気がする。
追記するだけで、サムネイル画像を揃えることができる
CSSに追記するだけで、関連記事のサムネイル画像を揃えることができます。
ただ、タイプA以外だと、サムネイル画像と記事タイトルの余白を調整しなければいけないんです。
つまり、タイプAがおすすめってことです。
パソコン表示だと横長の長方形なんです。
けど、スマホだと正方形なんですけど、OKってことにしました。
- 人気記事の表示にプラグインのWP-PostViewsを使うが軽くはない！
- 記事のアクセス数がわかるだけのプラグインのPost Views Counter
- 【簡単】人気記事のWPPのサムネイル画像をキレイに表示する方法！
関連記事の画像サイズを揃えるカスタマイズ
.related-posts img {
width:200px!important;
height:150px!important;
object-fit: cover;
}
追加CSSに上記をコピペするだけです。
!important;を使って強制しなくても反映するかもしれません。
けど、面倒なので、最初からつけちゃってます。
サムネイルの画像サイズは、調整が必要！
SANGOのタイプAで６記事表示するなら、横幅は200pxだと思います。
横幅200pxだとパソコンでは、3列を2行で表示されます。
スマホだと、なぜか正方形になって、きれいに2列で3行の表示になるんです。
サムネイル画像を再作成するといいかも？
上記を追記すれば、SANGOの関連記事のサムネイル画像サイズが揃います。
だけど、サムネイル画像を再作成したほうがいい場合もあります。
プラグインのRegenerate Thumbnailsで何度かサムネイルを再作成して調整しました。
ちなみに、このブログでは、同じ1280×720の画像サイズを使っているので関連記事のところはいじっていません。
デフォルトのままで何の問題もありません。
