WordPressの画像の一部がiPhoneだけ表示できてなかった状況と対応

先日、「iPhoneだけ記事の一部の画像が表示されていないよ」と教えてもらいました。見てみると表示されている画像と表示されていない画像があります。
その原因を探って表示されるようにしてみたので、それについて書きます。

iPhoneで見たときだけ、一部の画像だけ表示できていなかった状況

その記事は、

WordPressを触り始めた当初によつばデザインの後藤さんの指導を受ける機会があり、その後もフィードなどで有益な情報をいただいています。 日々、少しでも自分のサイトで効果が

これです。PCで見たときは全く問題なくすべての画像が表示されているのですが、iPhoneで見ると、

ちゃんと見える画像もあるのですが、

複数の画像のうち、この3つがこのようにちゃんと表示されていない状態でした。

表示されない画像の共通点を探す

複数ある画像の中でこの3つが表示できないということは、この3つの画像になにか共通の特徴があるのではないかな?と思いました。

調べてみたところ、表示できなかった画像はそれぞれ横幅が1000px以上の大きなものでした。試しに1000px以上の画像を800pxに縮小して

ダッシュボード メディア>新規作成 でアップロードして、

Image

この投稿の編集画面で、この画像を指定しているところを

Image

アップロードした画像のURLに変更して、更新をクリック

再表示してみると画像が見えるようになりました。

同じように他の画像も縮小をしてアップし直し、画像のURLを変更したことですべて表示されるようになりました。

結論:iPhoneにも表示させることを考えると画像は適切なサイズにしてから使うのがいいと思います

今回の原因は画像が大きすぎるために、レスポンシブ対応で画像を縮小するのがうまくいかなかった、のかな(?)と思われます。

画像の縮小と言えばタイミング良くつい2日前に、

最近、フリー写真を提供している unsplash.com の写真を使わせていただくことが多いです。とてもきれいな写真が版権フリーで利用できるので助かっています。 スライダーで画

この記事で複数の画像を一度に縮小できるソフト 画像革命21 を紹介したばかりでした。このようなソフトを使って、適切な大きさの画像を使うようにしたいですね(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る