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

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

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

きじとら
メディア設定、アイキャッチの編集を行っても改善できずにいたので、神頼みしたところ、簡単に修正できたので、内容シェアしておきます。

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

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

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

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

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

きじとら

お世話になります。

今まで無料テーマを使っていたブログを、DIVERに切り換えたのですが、WordPress Popular Postsを使った人気記事の表示(サイドバー)のアイキャッチ画像がぼやけるようになってしまいました。

(WordPress Popular Postsの設定は100×70にしてみました)

テーマ変更後に投稿した記事のアイキャッチサイズは760×428を使ってます。(それ以前は幅640くらいのサイズ画像でした)

デモサイトではどのように設定をされてますか?

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

お世話になっております。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を使う必要はないのですが、

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

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事