スマホでブログ画像がぼやけると原因と対策【ワードプレス】

ブログ画像がぼやける原因と対策 【ワードプレスサイトデザイン

ブログの記事の画像がぼやけてしまう・・。

 

せっかく記事を頑張って書いたのに、画像がぼやけてよく見えないときありますよね。

 

例えば、別記事で設定方法をまとめていたのですが、こんな感じになりました。

 

 

ミッツ
ミッツ

もはやモザイク!


う~ん、せっかくの説明ページがぼやけて見えないぞ・・。

 

というわけで、原因と対処法を探ってみました。

 

記事の画像がぼやける原因

 

これは、運営しているサイトがレスポンシブ対応しているからなんですね。

 

要するにパソコンなら高画質、スマホはスマホに合わせた画質にしよう、というわけです。

 

なので、高画質の処理が難しいスマホの場合は、画質を落として表示することになります。これがぼやける原因なんですね。

 

ブログ記事の画像がぼやける対策

① 画像の名前を調べる

 

画像に alt 属性が指定されていません。ファイル名: image-161.jpg

まずはスマホから、記事を表示して、問題の画像の部分を長押ししましょう。

 

そしてダウンロードを行います。詳細を見てみるとこんな感じでした。

 

 

名前を見ると、image-126-100×100.pngとなっていますね。どうやらスマホではこのサイズの画像を読み込んでいるようです。

 

② サーバーのファイルマネージャーへ移動

  

私はCONOHA-WINGを使用しているので、そこからファイルマネージャーを探します。「サイト管理」→「ファイルマネージャー」

 

 

ワードプレスの場合、「WP-content」→「uploads」→「2020(アップロードした年)」→「5(アップロードした月)」に画像データが入っていました。

 

 

ミッツ
ミッツ

おっ!問題の画像が見つかりました。

 

 

そこで、まずは「image-126.png」(リサイズされていない元のデータ)をcntrを押しながらドラッグして、コピーします。

 

 

コピーができました。そして、F2キーを押し、「image-126-100×100.png」のように、スマホで読み込まれるであろう名前にリネームします。ただ、このままだとリネームできません。同じ名前のファイルがあるからです。

 

隣にリサイズされてぼやけている「image-126-100×100.png」がありますから、そちらを消します。右クリックとかで削除できるはずです。

 

そして「image-126.png copy」を「image-126-100×100.png」にリネームしてください。

 

これでスマホのサイトに戻ってみると・・・。

 

 

このように、はっきり読み取れるようになりました。(もしなっていないなら、この記事の画質が悪いんです・・・)

 

ミッツ
ミッツ

応急処置的な感じですが、とりあえずOK。

どうしても画質を落とせない画像には使ってみるといいですね!

タイトルとURLをコピーしました