スマホ対応サイトを作ったのに、スマホで表示すると画像がぼやける場合があります。

これは、WordPressでレスポンシブWebデザインのテーマファイルを使った場合にたまにあります。

画像がぼやけると言っても、厳密に言うと元のサイズよりも引き延ばされてしまって画像が荒れると言った方が正解です。

012

例えば、元画像の幅が200pxしかないのに、300pxに引き延ばされて表示されるという感じです。

このケースは、PCで表示した場合、つまり画面幅がある端末で表示した場合は、オリジナルの画像サイズで表示されますので問題ない。

ところが、スマホなど画面幅が狭い端末で表示した場合に、画面幅に合わせて小さい画像を引き伸ばしてしまうのです。

これは、レスポンシブWebデザインの機能の1つである画像の幅を画面幅に自動的に合わせてくれるのがが悪く機能しているのです。

本来は、画面幅に収まらない画像をその画面に合わせて小さくしてくれる機能なのですが、設定がおかしいため小さい画像まで画面幅に合わせてしまうのです。

では、どこをどう直せばいいのか?という話なのですが、これが実はそのテーマファイルのCSSによって変更を加える箇所が異なるのが悩み所です。

また、他人の作ったCSSというのは、本当にメンテナンスがしにくいのである程度技術力がある人でないと手も入れられないかもしれません。

個人的には、少々乱暴に聞こえるかもしれませんが、テーマファイルを別のものに変えてしまうのがベストな解決方法だと思っています。

どうしても、そのテーマファイルを使わなければならない場合は、imgが以下の設定になっているか確認してみてください。

img { max-width:100%; height:auto }

あくまでヒントにしかならないと思いますが、ある程度CSSやレスポンシブWebデザインが分かっている方なら参考になると思います。

私は、自分が使っているテーマ、また、クライアント様に使ってもらっているテーマについては、このような不具合が起きないテーマをを選んでいます。

ただ、それでも、ごくたまに「このテーマファイルでないとダメ」というお客様がいらっしゃって、そのテーマファイルがこのような画像がぼやける問題を持っていることがあります。

その場合は、頑張って直すしかないので、技術力がついてしまって上記のようなCSSもヒントとしてご紹介できるようになった訳です(笑)

難題に取り組むと、技術力が上がってしまうのが技術者というやつですね。

でも、お客様はもちろんですが、このブログの読者の方々に多少のお役に立てればうれしいと思っています。(マジで^^)

このページは最終更新日から1年が経過しています。
情報が古い可能性がありますのでご注意願います。
新しい情報があるかもしれませんのでこちらから検索してみてください。