『Ususu blog』は、快適にWordPressが使えるレンタルサーバーの比較やレビューのブログ

人気記事ランキングのサムネイル画像をキレイに表示する方法!

人気記事ランキングのサムネイル画像をキレイに表示する

WordPress Popular Postsのサムネイル画像ってぼやけてるんです。

スマホでブログを見ていたらサムネイル画像がぼやけてない?

って気が付いたんです。

気にして見ていると、結構ぼやけてるんです。

 

サムネイル画像をキレイに表示するカスタマイズ方法

「メディア設定」の「サムネイルのサイズ」を200×200と画像サイズを大きくします。

プラグインのRegenerate Thumbnailsでサムネイル画像を作成し直します。

テーマを変更するときと同じ方法です。

 

サムネイルもキレイがいい!

ぼやけてないほうがいい。

 

人気記事ランキングの設定を変更する

ウィジェットで設定している画像サイズを変更します。

既定のサイズの「thumbnail (200×200,hard corp)」に変更します。

サムネイル画像を作成し直すと、「thumbnail (200×200,hard corp)」になっています。

 

サムネイル画像が200×200で表示されちゃう!

200×200のサムネイル画像を無理矢理75×75に縮小します。

200×200 → 75×75にすることでサムネイル画像がキレイになるんです。

 

.wpp-list img {
width: 100px!important;
height: 100px!important;
}

「追加CSS」に上記のCSSを追記します。

 

!important; で強制的にCSSを反映する

CSSを追記しても反映しなかったので、;  を !important;に変えて強制的に反映させました。

最初から、上記を使っても問題はありません。

 

でも、気になる人は、

.wpp-list img {
width: 100px;
height: 100px;
}

を追記してみてください。

サムネイルの画像サイズが100pxになっていますが、SANGOだと75pxです。