THE THOR ザ・トール 一覧表示のアイキャッチ画像が劣化する症状を解消

THE THOR の新着記事一覧やウィジェットを使った記事一覧の アイキャッチ画像 がぼやける症状を解消しました。

結論から言うと設定ミスが原因になります。




THE THOR アイキャッチ画像がぼやけているってどんな症状?

どれくらい画像が劣化していたのか下の画像をご覧ください。

THE THOR アイキャッチ画像 劣化
ボケボケです。
トリミングも気になる・・・
こんな症状の人いませんか?
※下段中央の画像はSVGファイルを使用しているので劣化していません。
拡大縮小しても劣化しない画像SVG

当サイトでは、画像にSVGファイルを多く利用しています。 ワードプレスの標準状態では、SVGファイルを扱うことができません。 WPでSVGファイルを利用する方法を紹介。 ※カスタマイズは自己責任でお願いします。 (a[…]


設定を修正したアイキャッチ画像は以下の通り。
THE THOR アイキャッチ画像 設定修正

全然違います。(スマホだとわかりづらい)

THE THOR アイキャッチ画像をキレイに表示させる設定

設定は以下から行います。

外観 → カスタマイズ → 基本設定[THE] → アイキャッチ画像の設定

アイキャッチ画像の設定の一番下に「アイキャッチサイズの設定」があります。

THE THOR アイキャッチ画像 二つの設定項目

項目は二つで「アーカイブ表示時のサイズを選択」「ウィジェット内表示時のサイズを選択」です。

さらにその項目の中の選択肢は以下の通り。

  • アイキャッチ(768×432 default)
  • アイキャッチミニ(375×375)
  • サムネイル(150×150)
  • ミディアム(300×300)
  • ラージ(1024×1024)
  • フル

THE THOR アイキャッチ画像 選択肢


僕の場合はこの設定がサムネイル(150×150)になっていました。

設定ミス

当たり前のように画像が小さくなります。

この設定をアイキャッチ(768×432 default)に直すことで今まで汚くて見るのも嫌だった画像達が普通の画像になりました。



アイキャッチ画像の設定をミスした理由

あまり覚えはありませんが、おそらく小さいほうが軽くて良いだろう、サムネイルって名前だから一覧表示には最適だろうと考えたのだと思います。考えが浅はか過ぎて笑えます。

設定サイズを変更する意味

defaultより大きなサイズを選べば、よりキレイなアイキャッチ画像が表示されるかもしれません。※大きな元画像を使用するのが前提

小さくする意味はなんだろう?アーカイブとウィジェットで個別に選択できる意味は?・・・ちょっとわかりません。何か内部的な事情や高度なスキルを持つ人には必要なものかもしれませんね。

ただ言えることはこの選択肢ではアイキャッチ(768×432 default)という16:9の画像が推奨されていると言うこと。THE THORの設定では様々な画像の比率を選択する場面がありますが基本は16:9なんだな〜ということが感じ取れます。



あとがき

この問題はフォーラムでも何度か話が出ていたような覚えがあります。

その都度、大きな画像を使えばキレイに表示されますよ、とアナウンスされていました。他にたいしたコメントも付かずに話題は流れていましたが、その質問した人たちはもしかしたら僕と同じミスを犯していたのかも知れません。

そんな設定はしてないけど画像が汚いという人は以下のリンクが解決のヒントになるかも知れません。
WordPressでサムネイル画像がぼやける現象を修正する2つの方法

なかなか珍しいケースかもしれませんがこんなトラブルもありますよという防備録でした。