Wordpress

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

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

クボヒロ
クボヒロ
WordPressにもすっかり慣れてきました!
じょちゅ
(助手)
じょちゅ
(助手)
そんな大口叩いて・・・ついさっきまでヒーヒー悩んでたじゃん・・・

はい。悩んでおりましたw

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

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

これは何事かと・・・数時間悩んだ上、やっと解決いたしました!
今ではばっちり綺麗なサムネイル画像になっております。

今回は、そのやり方をメモがてら記載したいと思います。

JIN(ジン)Wordpressテーマ

う〜ん、なんかぼやけているぞ・・現象

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

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

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

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

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

改善策

ぐぐっても同じような症状の人がおらず、もしかして私の目がおかしいのか、それとも知らないうちにどこか設定をいじってしまったのか・・・、本当にひょんなところの設定をしていないだけなのか・・・。
同じJINテーマを使用している他のサイト様を拝見させてもらったのですが、みんな綺麗なサムネなんですよ!!!やっぱり私がおかしいんだ・・・。????

とにかく何が原因なのかは分からないけれど、サムネイル画像をボヤけなくさせたい!(だってピックアップコンテンツのサムネイル画像はきちんとしているのに、記事一覧だけボヤけてるってみっともないし・・)

色々考えた結果、テーマ編集で下記の箇所をいじったらできました・・・!

じょちゅ
(助手)
じょちゅ
(助手)
親テーマの編集なのでバックアップはきちんとね!
  1. 親テーマ編集から、「テーマのための関数(functions.php)」を選択
  2. 「画像サイズを追加する」の行の、cps_thumbnailsの数値を2倍にする(320×180だったので倍の640×360にしてみた。)
  3. Force Regenerate Thumbnailsというプラグインを使って、画像を再生成する

これでオッケーでした☆

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

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

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

改善後はきれいになりました

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

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

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

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

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

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

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

〆まとめ〆

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

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

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

とりあえず、サムネイルの画質がきれいになって良かったです!!

ゆっくり休もうっと・・・。