人気記事プラグインWordPress Popular Postsのアイキャッチ画像がぼやける問題

WordPressのサイドバーにブログの人気記事を設置できるプラグイン、『WordPress Popular Posts』。

無料テーマで作っていたブログを「Diver」に変更してみたところ、WordPress Popular Postsのアイキャッチ画像がぼやけてしまいました。

人気記事のアイキャッチ画像がぼやけてしまう

今まで無料テーマを使っていたブログなんだけど、使っていた人気記事プラグインをそのまま引き継いだら、鮮明だったアイキャッチ画像がぼやけて、とても見づらくなってしまいました。

例えばDiverの場合、トップページをグリッド表示にした時に、サムネイル（アイキャッチ）がぼやけてしまうのは設定で解除できるんだけど、

参考記事はこちらDiverのサムネイル（アイキャッチ）画像がぼやける時の対処法

2019.9.25

ブログのトップページの記事一覧をグリッド表示にしていて、あれ？なんかサムネイル（アイキャッチ）の画像がぼやけてるんだけど…という方はこちらへどうぞ。 当ブログではWordPressテーマ「Diver」を使用していますが、Diver以外の方でも同じような症状がでる時はこの方法で解決できるかもしれません...

そこを見直しても改善できず、でもDiverのデモサイトをみると画像くっきりなので、なんらかの問題が生じているはず。

困った時の神頼み、Diverの永久サポート問合せを使ってみました。

するとまさかの当日中に返信が。

お世話になっております。Diver 高木です。

wordpress popular postsではサムネイルサイズを調整すると画像自体のサイズが小さくなるようなので、
ウィジェットの設定では200px × 140px くらい大きなサイズで設定してみて下さい。
その後、下記CSSをカスタマイズ > 追加CSS に記述してサイズを調整して下さい。

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

ご確認のほど、よろしくお願いいたします。

はち

はー、もうサポートが神ってるな！

ほんと、ありがたいです。（これくらいもわからないのに、ここまでブログカスタマイズできるのもDIVERならでは）

WordPress Popular Postsの設定とコード追加

というわけで、ウィジェットに設置したWordPress Popular Postsの投稿設定を以下に変更。

テーマエディター（もしくはカスタマイズ＞追加CSS）内に、以下コードをコピペ。

/*人気記事アイキャッチ調整*/
img.wpp-thumbnail {
    width: 100px;
    height: 70px;
}

きじとら

シェアしてもOKとのご回答を頂いたので、掲載させていただきました。

DIVERでは、Google Analytics API を取得してランキングを作成することができるので、WordPress Popular Postsを使う必要はないのですが、

もし、同じような症状にぶつかってしまった方の参考になれば幸いです。