SWELL ふきだしブロックのアイコン画質が悪くなる際の対処法

こんにちは!ゆめたかです♪
今回はWordPress有料テーマ「SWELL」で、ふきだしブロックのアイコン画質が悪くなる際の対処法をご紹介します。

目次

ふきだしブロックに設定した画像画質が悪い状態とは

助けてください
なんだが輪郭がゴワゴワする病気になってしまいました。

ある日、記事を執筆中にふきだしブロックで画像を新しく設定したら、このように画質が粗い状態になってしまいました。
以下にメディアライブラリから同じ画像を画像ブロックから出力し、大きさをふきだしブロック程度に調整してみましたが、上記画像と比べると随分画質が違うように感じます……

メディアライブラリから
選択した同じ画像

対処方法について

色々試行錯誤したり、SWELLフォーラムで「似たような悩みを持つ方の投稿」を覗いた結果、以下3つの対処方法を見つけたので実際に確認してみました。

対処法①「メディア設定からサムネイルサイズを初期値に戻す」

SWELLフォーラムではこのケースで解決したという投稿を見つけることができました。
しかし、このケースはサムネイルサイズの設定値を不適当な値に変更していたことが原因で起きた事象のように見受けられます。
私の場合、サムネイルサイズの設定値は初期値のままだったので、この対処法では解決しませんでした。

「設定」>「メディア」
メディア設定からサムネイルのサイズの幅と高さが初期値(150)になっているか確認する

ちなみに、ここの設定値とふきだしブロックに出力される画像にどのような関係があるのか気になり、サムネイルサイズの幅と高さにあえて不適当な数値であろう「0」を指定し、新しく画像をふきだしブロックへ出力してみましたが、全く同じ状態のものが出力されました……
あくまで私の見解ですが、サムネイルサイズの設定値とふきだしブロックに出力される画像には関係性がないように思われます。

対処法②「ふきだしに使用している画像が推奨サイズか変更する」

SWELLフォーラムから、元画像のサイズが大きすぎるとこのような事象が起きるケースがあると指摘されている投稿を見かけました。
ふきだしに使う画像の推奨サイズについては公式に記載はありませんが、SWELLの公式サイトでふきだしに使用されている画像サイズが240×240pxであったので、このサイズを推奨の目安としていいと判断しました。

SWELL公式サイトのふきだしブロックで使われている
画像を開発者エディタから確認

私が使用していた画像サイズは650×650pxであったので、240×240pxに変更すれば解決するかもしれないと思い、「I♡IMG(外部サイト)」から画像サイズを変更してみました。

240×240pxの私です。
どうでしょうか?

650×650pxの私です。
どうでしょうか?

無事、治りました!
650×650pxの画像と比べると、画質が全然違います。

治ったのでよしとしますが、実はこの手の画像はいくつか持っていて、他の650×650pxの画像ではこの事象は起きませんでした。なぜこの画像のみ粗くなるかの原因については迷宮入りとなりそうです……

650×650pxです。
男の子の画像だと、問題ないんですよね……

対処法③「ふきだしセットを新規登録する」

SWELLのふきだしブロックは投稿画面から作成するのではなく、設定画面からふきだしセットを事前に登録しておき、それらを挿入するという方法があります。
この方法で実施すると、画像サイズを変更することなく650×650pxの画像でも正常に表示することができました。

対処法②でも③でも事象は解決するのでよしとしますが、原因がわからないのが少し気持ち悪いですね……

しののめ

ふきだしセットから挿入された650×650px私です。
どうでしょうか?

ブロックから画像挿入された650×650px私です。
どうでしょうか?

おわりに

以上、ふきだしブロックのアイコン画質が悪くなる際の対処法でした♪

正確には、ふきだしブロックからアイコン画像をアップロードする際、240px以上の画像を選択すると画質が粗くなることがある……という何とも言い難い事象でしたね。

ちなみに、この現象はPCのみで起きます。スマホでは問題なく表示されました。
あとその場のオペレーションにはなってしまいますが、ブラウザの表示倍率を上げることでも解消します……

根本の原因は闇の中ですね。
まあ当記事のいずれかの対処法で解決することができるはずなので、自分にあった方法を試してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次