【WordPress】作成した表がスマホ表示した時に枠外へはみ出る件【対処法】

最近のWordPressのテーマはレスポンシブデザインに対応しているものが多いですね。私の使っている『Tortuga』もまたレスポンシブデザイン対応のテーマです。

レスポンシブデザインとはPCやスマホ、タブレット等どんな端末でも快適に操作、表示できるようにしてくれるデザインの事です。なので特に何もしなくても勝手にスマホ等の表示に対応をしちゃってくれるのです。

なんて便利な世の中になったんだろうと開発者様に感謝しつつ、「たまにはスマホで自分のブログでも確認してみるか」とチェックしてみると、先日書いた記事【スロット必勝法】で作成した表が画面からはみ出ているではありませんか(゜o゜)

なんてこったい!!

スポンサーリンク

1.なぜ表がはみ出るのか?

どうやら記事作成の際にテーブルから出したまま何もいじっていなければしっかり画面内に収まってくれるようです。

この何もいじっていないというのはこんな感じにドラッグして枠のサイズを変更したりすることです。

これをしてしまうと、幅指定(width指定)がpxで書き込まれてしまいます。先ほどの場合、テキスト表示するとこんな感じになっていました。

<table style=”width: 719.88px;”>

このwidth指定がどうやら悪さをしているようです。

2.修正方法

それでは修正方法ですが、問題の表のコードを直します。先ほど同様テキスト表示にして『width: 〇〇px』を全て消しましょう。

以上で完了です。めちゃくちゃ簡単でしたね。

3.確認してみよう

本当に直っているのか一応確認しておきましょう。

はい。この通りピッタリ収まってますね。但し、文字は小さくならないので見出しなんかは2行になっていますね。(因みに表は見栄えが良くなるように調整しました。)

4.まとめ

いちいち『width: 〇〇px』を消すのは正直めんどくさいですが、私の場合そんな表を使ってないので割と簡単に終わりました。

もっと複雑な表ならちょっと話は変わってきますが、単純な表ぐらいならこの方法でチャチャっと解決しちゃいましょう!!

スポンサーリンク

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です