PHP編集不要。WordPressでサムネイル(アイキャッチ)がボケる時の対処法

WordPressにおいて記事一覧ページなどのサムネイル画像(アイキャッチ画像)がボケる(ボヤける)時の対処法。

サムネイル画像がボケている
くっきりな表示

画像サイズが適切かどうかをまずはチェック

そもそもの話としてサムネイルやアイキャッチ画像の解像度が表示される大きさより小さい場合は、当たり前だがその分画像が引き延ばされるのでボケる。

サムネイル画像がボケる時は、まずサムネイル画像の解像度が表示サイズより小さくなっていないか確認しよう。

例えばこのブログではテーマは「SANGO」を使用しているがサムネイル表示サイズは520x300であるため、最低でも画像が520x300以上の解像度でないとサムネイルはボケる。

Retina環境で画像がボケる場合はサムネイルの生成サイズに問題がある

また、画像が表示サイズと同じ解像度あるいはそれより大きな解像度であってもMacやiPhone、iPadのRetinaディスプレイでは画像がスケーリング(拡大処理)されるので一定以上の解像度でないとサムネイルはボケる。

Retina環境で画像がボケる場合の対策には表示サイズよりある程度大きな解像度の画像を設定する必要があるのだが、テーマによっては大きな解像度の画像をアップロードしても、テーマ側で自動的にリサイズされてしまう場合がある。

このブログのテーマ「SANGO」も同様で、520x300以上の解像度の画像であってもアイキャッチに設定するとリサイズされてしまいサムネイルはボケる。

この問題に対処するにはWordPressやテーマファイルのサムネイルの生成サイズを変更したり生成そのものを無効にする必要がある。

EWWW Image Optimizerでサムネイルの自動リサイズを無効にする

前述の通り適切な画像を使用してもサムネイルがボケる場合はWordPressやテーマファイルのサムネイル生成サイズの変更や生成そのものを無効にする必要があるが、そのためにはテーマファイルの編集が必要になる。

ただ、テーマファイルの編集はPHPを弄ることになるためトラブルが起きたり、想定通りの動作をしないことがあるので僕を含む初心者には敷居が高く、サムネイルの生成サイズを変更するよりEWWW Image Optimizerというプラグインで特定サムネイルのリサイズを無効にする方法の方がいい。

EWWW Image Optimizerをインストールする

まずは通常のプラグインと同じようにEWWW Image Optimizerをインストールして有効化しよう。

このプラグインは主にWordPressにアップロードした画像を自動で圧縮して画像のファイルサイズを減らす目的で使用されるが、任意のサムネイル画像の生成を無効にする機能も備わっている。

このプラグインは非常に優秀でWordPressのデフォルトのサムネイル生成も無効にできる他、インストールされたテーマファイルを自動で認識してそのテーマファイル独自のサムネイル生成も無効にできる。

記事一覧で使用されているサムネイルの画像サイズを調べよう

プラグインを使用する前に、まず記事一覧で使用されているサムネイルの画像サイズを調べよう。

ブラウザからソースを表示するなどして調べてもいいが、ここではテーマファイルの記述を見てサムネイルの生成サイズを調べる方法を説明する。

まず自身が使用しているテーマのfunctions.php(テーマのための関数)をダッシュボードのテーマエディターで開いてサムネイル生成に関する記述を探す。

当ブログのテーマ「SANGO」であれば下記のようになっている。

前述の通り「SANGO」が生成する記事一覧ページや関連記事のサムネイルサイズは520x300である。

つまりどんなに大きな解像度の画像をアップロードしてもこの記述によりサムネイルは520x300にリサイズされてしまう。

この記述の値を直接変更したり新たなサイズのサムネイル画像を生成するように記述を追加してもいいが、前述の通りPHPの編集はリスクがあるのであまりおすすめはしない。

ちなみにサムネイルを生成している記述は大体どのテーマでも以下のコードの下に書かれているので、以下のコードを目安に探すと見つけやすい。

このコードを目安に
add_theme_support('post-thumbnails');

サムネイルの生成サイズがわかったのでEWWW Image Optimizerで該当のサムネイルのリサイズを無効にしよう。

サムネイルの自動リサイズを無効にする

EWWW Image Optimizerをインストールして有効化したらダッシュボードの設定から「EWWW Image Optimizer」を開き”リサイズ”というタブをクリックしよう。

リサイズのタブを開いたら記事一覧で使用されているサムネイルサイズの設定を探そう。

例えばこのブログのテーマ「SANGO」であれば記事一覧で使用されているサムネイルサイズは前述の通り520x300であるため、520x300サイズの欄の「作成を無効化」にチェックをつけて520x300のサムネイル生成を無効にする。

他にも例えば「人気記事」「最近の投稿」といったウィジェットのサムネイル画像の生成も無効にしたい場合は該当のサイズに同じように「作成を無効化」のチェックをつけよう。

ちなみに左にある「最適化を無効化」という項目にチェックをつけると画像の自動圧縮機能を無効にすることができるので「サムネイル画像の画質を落としたくない」という場合にはそちらにもチェックをつけるといいだろう。

設定を保存したらEWWW Image Optimizerの設定はこれで完了だ。

サムネイルを再生成する

テーマファイルの編集にしろEWWW Image Optimizerにしろ、サムネイルのリサイズを無効化しても仕様上、既存のサムネイルには反映されず画像はボケたままであるためサムネイル設定を反映させるには改めて画像をアップロードし直す必要がある。

既に記事が大量にある場合は一つ一つアップロードし直すのは手間なのでRegenerate Thumbnailsというプラグインでサムネイル画像の一括再生成を行おう。

注意点

サムネイルのリサイズを無効化したからには今後アップロードする画像の解像度に注意する必要がある。

当然のことながら画像をアップロードしても「作成を無効化」にチェックをつけたサムネイルのリサイズは行われなくなったので、元画像と同じ解像度でそのまま表示される。

このブログを例に取るならリサイズ無効化前はたとえ1024x591という解像度の画像であってもテーマ側で自動で520x300にリサイズされていたが、無効化すると1024x591の解像度の画像がそのまま使用される。

このため解像度が大きすぎる画像を使用するとファイルサイズが増えて訪問者の負担が増える。

当ブログのテーマ「SANGO」では520x300のサムネイルの生成を無効化しているが、大体700x404程度の解像度の画像であればサムネイルもボケず、ファイルサイズもそれほど大きくはならない。

サムネイルのリサイズを無効化したら次から画像をアップロードする際はファイルサイズと解像度に気をつけよう。

まとめ

以上、テーマ(PHP)を一切編集せずにプラグインのみでサムネイルの画像がボケる際の対処法を紹介した。

ぶっちゃけていえばサムネイル画像が写真などであればわざわざサムネイルのリサイズを無効化しなくてもそれほどボケは目立たないのだが、サムネイルにイラストなどの「二次元的な画像」を使用すると途端にボケが目立つ。

それほどボケが気にならないのなら上記の対処法を無理にする必要はないが、サムネイルの視認性が悪いと感じたら試してみると予想以上にサムネイル画像がクリアに表示されるので、画像のボケが気になるけどでPHPの編集を避けたいといった場合には是非上記の対処法を実践してほしい。