ブログのトップページの記事一覧をグリッド表示にしていて、あれ？なんかサムネイル（アイキャッチ）の画像がぼやけてるんだけど…という方はこちらへどうぞ。
当ブログではWordPressテーマ「Diver」を使用していますが、Diver以外の方でも同じような症状がでる時はこの方法で解決できるかもしれません。
Contents
WordPressの記事一覧のサムネイル（アイキャッチ）画像がぼやける？
ブログの記事をみても、アイキャッチ画像はきれいに表示されているのに、トップページの記事一覧に表示されるサムネイル（アイキャッチ）画像がぼやけてしまうことがあります。
こんな感じ↓
せっかくpixabayでダウンロードした綺麗な画像が台無しに…！
グリッド表示のサムネイル（アイキャッチ）画像がぼやける原因
WordPressテーマによっては、トップページの記事一覧を画像が大き目のグリッド表示にすることができるものも増えています。
画像がぼやけてしまうのは、サムネイルの画像の大きさが、グリッド表示の範囲より小さいからです。
でもアイキャッチには幅640~700くらいの画像を使ってるけど…
このブログのグリッド表示部分の画像の大きさを確認してみると、289×170。アイキャッチ用としてアップロードした画像のほうが大きいサイズになっています。
それは、WordPressのメディア設定の仕様によるものです。
WordPressのメディア設定をデフォルトのまま使用すると、1枚の画像をアップロードした際に、サムネイル用サイズの画像が自動生成されるようになっています。
アイキャッチ用の画像としてアップロードした画像も、サムネイル用は150×150サイズに修正されているんですね。
サムネイルの画像がぼやけるなら、メディア設定でサムネイルの上限サイズを変更すればいいってわけですね。
Diverのグリッド表示がぼやける場合の対処方法
このブログはDiverを使用しているので、ダッシュボード⇒Diverオプション⇒基本設定より記事一覧サムネイルサイズを変更することができます。
このようにデフォルトでは記事一覧サムネイルサイズが「サムネイル」になっているので、WordPressのメディア設定を変更していないままだと、150×150サイズの画像がグリッド表示にも使用されることになります。
これを中サイズや大サイズ、あるいはフルサイズに変更しておくと、グリッドの画像範囲よりも使用画像が大きくなるので、サムネイルがぼやけることがなくなります。
※無駄に大きい画像をサムネイルに設定するのはおすすめしません。
グリッドの画像幅はその他の設定やデバイスによって違ってくるので一概には言えませんが、先ほど紹介した参考記事内で、自分のPCに表示されている画像の大きさを調べる方法を紹介しています。
メディア設定を変更するか、Diverオプションを変更するかはWordPressの使い方次第。
例えば、メディア設定のサムネイルの上限を大きくしたなら、Diverオプションはそのままでもいいですし、メディア設定はそのままに、Diverオプションのサムネイルサイズを変更することも可能。
デモサイト用のテストブログでは、メディア設定の大サイズを小さくして（中サイズは0にして削除）Diverオプションを以下のように設定。
するとさきほどのぼやけていた記事一覧表示が…
くっきり綺麗に表示されましたー！
（Diverカスタマイザー内に、マウスオンで画像がぼける設定もあるので、それと間違えないように…）
サムネイル（アイキャッチ）画像がぼやける時の対処まとめ
トップページの画像一覧に表示されるサムネイル（記事のアイキャッチに設定した画像）がぼやける時は、
- WordPressのメディア設定（設定⇒メディア）を見直す
- Diverオプションの記事一覧サムネイルの設定を見直す
以上、トップページのアイキャッチ画像（つまりはサムネイルなんだけど）がぼやける際の対処法でした。
Diverのファーストビューがぼやける時はこちらもチェック↓
