WordPress(Luxeritas) サムネイル画像のぼやけを直す方法

2020-09-25

こんにちは。みたみなです。
見に来てくださり、ありがとうございます。

今回は、サムネイル画像のぼやけを直す方法をご紹介します。

最初は気付かなかったのですが、投稿していく中でサムネイルに違和感を感じ、画像がぼやけていることに気が付きました。
画像ファイルを修正しても、ネットで調べたことを試しても改善されませんでした。

試行錯誤し、サムネイル画像がきれいに表示されるようになりました。
同じ現象で困っている方、ぜひ、試してみてください。

操作環境

操作を確認した環境は以下です。
 WordPress ・・・ 5.4.2
 テーマ   ・・・ Luxeritas 3.0.3
  ※ バージョンが違う方は、同じ画面表示でない場合があります。
    ご了承ください。

作業前の状態

作業前の状態は以下の画像になります。
ホーム画面に表示されるサムネイル画像です。
ぼやけていることがわかると思います。
記事の投稿画面で設定するアイキャッチ画像は、ぼやけていなかったのですごく不思議でした。

作業後の状態

作業後の状態は以下の画像になります。
作業前と比較して、画像がきれいになったことがわかると思います。

設定変更作業

1.ユーザーサムネイルを作成する

WordPress管理画面にて
 「Luxeritas」メニュー
   → 「管理機能」メニュー
     → 「サムネイル管理」タブ
をクリックする。

ユーザーサムネイルを以下のように作成する。
 ・ 「名前」はなんでもOK。わかりやすいものにする。
 ・ 「作成」チェックと「Crop」チェックをONにする。
 ・ 最大サイズは150以上で、縦と横のサイズは同じにする。

 ※ 作業後の状態は300×300のサイズの画像です。
 ※ ユーザーサムネイルは3つまで作成可能です。

2.サムネイル(アイキャッチ)の表示を変更する

WordPress管理画面にて
 「Luxeritas」メニュー
   → 「カスタマイズ(外観)」メニュー
をクリックする。


テーマの設定画面が表示したら、
 「サムネイル(アイキャッチ)」
をクリックする。

サムネイル(アイキャッチ)の変更

「サムネイル(アイキャッチ)」設定画面の
「サムネイルの表示サイズ」部分にある
「タイル型(グリットレイアウト)」を
作成したユーザーサムネイルに変更する。

図は 300×300 で作成したユーザーサムネイルを指定しています。

ここの数値は大きくすればきれいになりますが、扱う画像サイズが大きくなるので、表示速度に影響がでます。
「ユーザーサムネイル」の数値を変更し、最適値を探しくださいね。


私は、300pxと500pxで迷いました。
500pxの方がきれいでしたが、300pxでも満足する表示でしたので300pxを選択しました。

 

3.メディア設定にて画像サイズを変更する

WordPress管理画面にて
 「設定」メニュー
   → 「メディア」メニュー
をクリックする。

「サムネイルのサイズ」部分の数値を、「2.サムネイル(アイキャッチ)の表示を変更する」の「タイル型(グリットレイアウト)」で指定したサイズに変更し、「変更を保存」ボタンをクリックする。

私の場合は、300×300 のサイズとしたので、「サムネイルのサイズ」を 300 にしました。

最後に

いかがでしたでしょうか?
多くの方が解消方法を公開していましたが、バージョンが違うのか(?)、私は他の方の方法ではきれいな表示にすることができませんでした。
同じことでお困りの方はぜひ、試してみてください。