WordPressでサムネイル(アイキャッチ)画像がぼやける現象と解消法!

WordPressで記事の一覧で表示されるサムネイルが何故かすごくぼやけていることってありませんか?

私も結構色々調べたり色んな方法を試して改善するのに少し時間がかかりました。

今回は、私が成功した方法をご紹介します。

原因

サムネイルがぼやける原因は、画像のサイズがサムネイルの表示される枠より小さいからです。

サムネイル画像のサイズが150×150で要素のサイズが300×300だとすると、150しかない幅が300まで引き伸ばされてしまい、その結果ぼやけてしまうのです。

WordPressで画像をアップロードすると、サムネイル(150×150)、中サイズ(300×300)、大サイズ(1024×1024)、フルサイズの4つが自動的に作成されサーバーに保存されます。

なのでサムネイルのサイズを大きくすることで、ぼやける現象が改善されるわけです。

では早速やってみましょう。

解消法

画像サイズの変更

まずWordPressの設定からメディアを開き、サムネイルサイズを変更します。(初期値は150です)

私は320にしていますが、300から試してみる方がいいと思います。

メディアライブラリに登録してある画像を再アップロード

メディアライブラリにアップロードしてある写真・画像を再アップロードします。

私は枚数がそれほど多くはなかったので割とスムーズにいきましたが、すでにたくさんの画像をアップロードしている方はちょっと大変かもしれません。

アイキャッチ画像の差し替え

メディアライブラリの画像の差し替えが済んだら、投稿画面のアイキャッチ画像を改めて指定します。

これで完了です。

改善前と改善後

これが改善前のサムネイルです。かなりぼやけてますね。

こっちが改善されたサムネイル。

かなり改善されました。

まとめ

この記事で紹介した方法の他にも、画像サイズを全て0にする方法や、phpを修正する方法など色々あるので、自分にあたやり方を見つけてトライしてみてください。

サムネイル(アイキャッチ)画像をクリアにすることで、ブログやサイトの印象がグッと良くなります。

記事が増えた後だと変更が面倒になってしまうので、早めに手を打っておきましょう!