[WordPress]スマホで見るとテーブルがはみ出す

スポンサーリンク

テーブルがはみ出てる!

普段はPCでブログを書いているので、スマホでどう見えるのか、あまり気にしていませんでした。
アクセスログを見ると、結構スマホで見ていただいてるようなので、どんな感じに見えるのかなと思って見てみると・・・

自分のブログをスマホで見てました。

screenshot1

は、はみ出てる(汗

これは見にくいです(><)

ということで原因を調べてみました。

Tableを使っているのが原因っぽい

画像を並べるためにTableタグを使って、その中に画像を配置しました。
その時のやり方がまずかったのでしょうか。
ビジュアルエディターでは分からないので、テキスト表示に切り替えてソースを確認してみます。

<table style="width:870px">
   :
   :
</table>

[width]指定がされている!

どうもこれが怪しいと思って、style=”width:870px”を削除してみました。

そして再表示させてみると・・・

screenshot2

ちゃんと収まってる!

これでスマホでも見やすくなったでしょうか。
画像が小さくなるので、返って見づらいかもしれませんが、はみ出しているよりは見栄えはいいかなと思います。

ビジュアルエディターはお手軽で便利ですが、思いもよらない影響があるものですね。今後は、スマホでも表示確認をしていこうと思いました。

スポンサーリンク

お役に立てばフォローお願いします