投稿した画像を”スマホ”で見る際にできるスペース(空白)を消す方法

この記事は約1分で読めます。

こんにちはFPヒデです。
今回はWordPressで画像を投稿(メディアを追加)した際、※レスポンシブWebデザイン設定にしてある場合に、スマホから閲覧した時に画像と画像間のスペース(空白)が非常にあいてしまう現象が起きたのでしばらくレスポンシブWebデザイン設定を「なし」にしていました。
最近になって、その原因と対処方法がわかりましたので同じような現象に遭遇した方は、是非参考にしてみてくださいね。

それでは早速その原因をお伝えします。
スマホ時に空白ができるのは、PC時に設定されていたcssでのfloatが解除された事によって本来ある空白が表示されているためでした。そのfloatという部分が何らかで解除されたのですが、理由はいまだに不明のままです。^^

対処方法としましては、「alignleft」を削除して画像の下方にある空白記述「 」も合わせて削除するというものです。
下記が変更前と変更後になります。

変更前

2014-06-30 23-12-16

変更後

2014-06-30 23-15-28

いかがでしょうか。変更前と比較して変更後は上記画像の用に「alignleft」と「& nbsp:」を削除することで、必要の無いほどスペースがあったスマホ画面も無事に適切なスペースで見れるようになりました。

参考にして頂けましたら嬉しいです。

コメントを残す

サブコンテンツ

このページの先頭へ