ワードプレスを始める → たかとりブログ

有料テーマのSANGOの関連記事の画像サイズをCSS追記で揃える方法

有料テーマのSANGOの関連記事の画像サイズをCSS追記で揃える方法

同じ大きさの画像を使っていれば、サムネイル画像は揃っています。

少しくらい画像サイズが違っていても、横長の長方形なら画像がばらつかないと思うんです。

でも、正方形の画像を使ってたりすると、画像が揃わないことがあるんです。

そんな場合、ちょっと強引というか、無理矢理な方法だけど、SANGOの関連記事のサムネイル画像を揃えることができます。

使う画像サイズは揃えよう!

同じサイズが一番!

正方形が良くない気がする。

 

追記するだけで、サムネイル画像を揃えることができる

CSSに追記するだけで、関連記事のサムネイル画像を揃えることができます。

ただ、タイプA以外だと、サムネイル画像と記事タイトルの余白を調整しなければいけないんです。

つまり、タイプAがおすすめってことです。

パソコン表示だと横長の長方形なんです。

けど、スマホだと正方形なんですけど、OKってことにしました。

WPPのサムネイルがぼやけていたら、【簡単】人気記事のWPPのサムネイル画像をキレイに表示する方法!を読んでくださいね。

 

関連記事の画像サイズを揃えるカスタマイズ

 

.related-posts img {
width:220px!important;
height:150px!important;
object-fit: cover;
}

 

追加CSSに上記をコピペするだけです。

!important;を使って強制しなくても反映するかもしれません。

けど、面倒なので、最初からつけちゃってます。

 

サムネイルの画像サイズは、調整が必要!

SANGOのタイプAで6記事表示するなら、横幅は220pxだと思います。

横幅220pxだとパソコンでは、3列を2行で表示されます。

数字を変更して微調整してくださいね。

スマホだと、なぜか正方形になって、きれいに2列で3行の表示になるんです。

 

サムネイル画像を再作成するといいかも?

上記を追記すれば、SANGOの関連記事のサムネイル画像サイズが揃います。

だけど、サムネイル画像を再作成したほうがいい場合もあります。

プラグインのRegenerate Thumbnailsで何度かサムネイルを再作成して調整しました。

 

ちなみに、このブログでは、同じ1280×720の画像サイズを使っているので関連記事のところはいじっていません。

デフォルトのままで何の問題もありません。