新宿区のトータルクリエイティブオフィス えんぎ株式会社 / ENGI Inc.
©2020 ENGI Inc.
WordPressでサムネイル（アイキャッチ）が粗い場合の対処法
2020年06月28日 17:52
こんにちは、ENGI MAG編集部です！
WordPressでサムネイル（アイキャッチ）は、初期設定だと150px×150pxと比較的小さいサイズの正方形になっているため、そのままだと粗く（画質が悪く）表示されることが多いです。
上記サンプルだと「サムネが粗い…」と囲った箇所以外の画像は粗くなっていませんが、粗くて悩んでいる方は全てのサムネが粗く表示されているはずです。
今回は粗いサムネイルをきれいに表示する方法をお教えいたします！
（大きな画像がアップされている前提となります。）
メディア設定を変更
先述の通り、WordPressではデフォルトで幅150×高さ150pxという小さなサイズに設定されています。
どんなに画質の良い画像をサムネイルに設定していても一度150×150pxにされてしまい、それを無理やり大きなサイズで表示しているので粗くなっているわけです。なのでこちらを変更します。
管理画面のサイドバー[設定]の中の[メディア]をクリックすると、『サムネイルのサイズ』という項目があります。
こちらに入っている数字を適当な大きさに変更して、[変更を保存]という青いボタンをクリックしてください。
あまり大きすぎると表示スピードが遅くなる可能性があるのでその辺はご自身の判断で適当なところを見つけてください。
設定を変更しても粗い場合の対処法
これで今後設定するサムネイルは綺麗に表示されますが、
・サムネイルのサイズ
・中サイズ
・大サイズ
の各サイズはアップした時点でそれぞれのサイズが生成されるため、一度小さいサイズで生成されたサムネイルは設定を変えても粗いまま表示されてしまいますので、アイキャッチ画像を削除して、画像を上げ直して更新してください。
ただ、既に多くのサムネイルを設定してしまっている場合は全てを差し替えるのは骨が折れるので、WordPressのプラグイン『Regenerate Thumbnails』を使ってサムネイルをまとめてリサイズすると楽です。
プラグインメニューから『Regenerate Thumbnails』と調べてインストールするか、
『Regenerate Thumbnails』からダウンロードしてご利用ください。
Regenerate Thumbnailsは日本語で直訳すると“サムネイルを再生成する”という意味で、文字通り再生成してくれますプラグインです。
サムネイルを取得しているPHPの記述を変更
もう1つ、php側のソースを大きい画像を表示する設定に変える方法があります。
一般的にサムネイルを取得する際、以下のようなソースを記述することが多いかと思います。
<?php the_post_thumbnail(); ?>
このままだとサムネイルで作られたサイズ（デフォルトだと150×150px）を取得してきますので、以下のいずれかにすると大きなサイズで取得できるようになります。
<?php the_post_thumbnail( 'thumbnail' ); ?> //サムネイルのサイズ（デフォルトだと150×150px）
<?php the_post_thumbnail( 'medium' ); ?> //中サイズ
<?php the_post_thumbnail( 'large' ); ?> //大サイズ
<?php the_post_thumbnail( 'full' ); ?> //フルサイズ（元サイズ）
以上となります！