Wordpress

【JINテーマ】記事一覧のサムネイル画像がボヤける!【改善策】

クボヒロ

こんにちは、クボヒロです。
(@Kubohiro7)

最近Wordpressのテーマを「JIN」にしたんです。有名な有料テーマだしとっても気に入って使っています。

ただ、パソコンで見る分には良かったのですが、いざスマホでチェックしてみたら記事一覧のサムネイル画像(アイキャッチ画像)がぼやけて見えたんです。

今回はその解決法になります。

JIN(ジン)Wordpressテーマはこちら

サムネイルがぼやけている?!

こちらは、スマホから見た私のブログです。

一見、なんてことなさそうですが、よ〜く見ると記事のサムネイル画像がぼやけています。拡大してみますね。
(スマホの方はピンチインで拡大すると分かりやすいです。)

ピックアップコンテンツ(ブログの上の方にある記事)のサムネイルはぼやけてないのですが、記事一覧になるとぼやけているんです。

「ハリーポッターシリーズを読んでみませんか?」という記事の、ピックアップコンテンツのほうと、記事一覧のほうのサムネイル画像を見比べてみると分かりやすいです。
明らかに記事一覧のサムネイル画像はぼやけて見えます。

これもぼやけてます。アップロードしたのは1920×1080サイズなんですよ?!
ちなみに下記はパソコン表示。上記の画像を同じ大きさで表示しているのに、この画質の違い。

改善策は?

テーマ編集で下記の箇所をいじればOKでした。

やり方
  1. 親テーマ編集から、「テーマのための関数(functions.php)」を選択
  2. 「画像サイズを追加する」の行の、cps_thumbnailsの数値を2倍にする(320×180だったので倍の640×360にしてみた。)
  3. Force Regenerate Thumbnailsというプラグインを使って、画像を再生成する

アイキャッチ画像という行は、投稿エディターにある「アイキャッチ画像」という項目の画像サイズです。150×150のままでいじらない方が良いです。

エディタ内のサムネのサイズ

Force Regenerate Thumbnailsは、使わなくなったサイズの画像を消してくれつつ、新しいサイズを再生成してくれるプラグインなのでとても便利です。
今回の古いサイズ320を消してもらって、640を作り直してもらいました。

注意点

親テーマをいじっていますので、バックアップは不可欠です。

また、親テーマをいじるので、もしJINテーマの更新があった場合はこのいじったものは無くなって(上書きされて)しまいます。

クボヒロ

とりあえずしのぎの解決策だよ。でも次JINの更新があったら、このサムネぼやけも改善されてそうだけど?!

改善後はキレイになりました!

「前」のほうだと320×180で表示されていたので、ぼやけて見えますよね。倍にしたらピックアップコンテンツの画質と揃いました。

使わない画像サイズ生成をやめさせるとなお良し

画像って、ひとつのサイズをアップロードするわけではないんですよね。なんだか色々なサイズが生成され、これじゃサーバーの容量も食ってしまいます。

元からあるミディアムとラージに加え、ミディアムラージ、それにテーマでご親切に設定されていたスモールとラージ
クボヒロ

ややこしすぎか!!

EWWW Image Optimizerというプラグインから、リサイズの設定でチェックを入れると生成されないようになります。
(このプラグインは、画像も勝手に圧縮してくれるのでおすすめ!)

元からあるWordpressの大きさ(ミディアムとラージ)は、設定>メディアから0pxにすることによって生成されないように出来ます。でも上記のプラグインだと、チェックだけで出来るのでおすすめ。

これで無駄なものが減りました

まとめ

トップページの記事一覧はブログの顔ですから、綺麗に表示させたいですよね!

親テーマ編集はこわいので、バックアップをとっておくことをおすすめします。

また、使っていない画像サイズはデータ容量を圧迫しますので、生成されないようにしたほうが良いです。