パソコンでワードプレスの表を作成する作業をしていたので、スマホで表を見ると崩れてしまうことに気が付きませんでした
ワードプレスのプラグイン、
TinyMCE Advancedのテーブルを利用して表を作成したのですが、スマホで見ると表が崩れてしまって、文章が読めなくなるということがわかりました。
レスポンシブのテーマを使っているので、どの端末でも、綺麗にHPが見えると思っていたので、何故なのかネットで調べてみました。
テーブルを利用して表を作成する時に、マウスで丁度良いセルの大きさに調節する時に、
レスポンシブの設定ではなくなってしまうことに原因があることがわかりました。
スマホ対応OKな表 | マウスで拡大縮小をしてないそのままの表 |
スマホ対応NGな表 | マウスで拡大縮小など変更を加えた表 |
テーブルの設定で、
一手間加えるだけでスマホでもきれいに表示できるレスポンシブ対応にすることができます。
表全体を範囲指定します。
テーブルボタンをクリックします。そして表のプロパティをクリックします。
幅の欄の617を削除して空欄にして、サイズを指定しないようにします。
以下のようになれば、OKです。
-
- OKをクリックします。
- PCでスマホ端末での見え方を確認します。
- 確認するのはGoogleブラウザでの方法ですが、
ブラウザの右角にあるGoogle Chromeの設定をクリックします。
その他のツールを選択して、デベロッパーツールをクリックします。
崩れること無く、スマホが見ることができました。
コメント