Wordpuressで記事を書いていくと比較的良く使うテーブル作成ですが
一生懸命記事を仕上げてばっちり表まで作ってPCでプレビューでよっしゃ!
綺麗に出来てる!達成感でいっぱいですね?
ちょっと落ち着いてください。その記事スマホで確認してみましたか?
表の右側が見切れていたり、下の文章まで表が重なってぐちゃぐちゃという状態になってませんか?
私は漏れなくやっちゃいましたっ!
→レンタルサーバー mixhost・エックスサーバー・ロリポップ3社比較表!
あらら見事に切れちゃってますね。
PCの訪問者は良いけど今や60%はスマホの訪問者です。
これじゃストレスになっちゃいますね。スライダー付いてるならまだしも、、
同じ様な状態に陥ってこのブログにたどり着いた方の為にも
スマホでもきれいにレイアウト出来るやり方を紹介にしたいと思います。
スマホでテーブル表示が見切れる原因
PCでブログを書いている途中の段階ではテーブルの端をドラッグして
バランスを取りながらテーブルの作成をしたんじゃないでしょうか!?
原因 → 枠をドラッグした事によりpx指定となってしまった。
上図の枠を手動で動かしているのが原因です。
下図は表のプロパティ画面ですが絶対値であるpx指定なってしまっています。
この状態だとレスポンシブではありません。
PCではバランス良く表示されてもスマホだと表示範囲以外は当然見切れ状態となり表示されません。
パーセント表示で指定して解決!
それでは解決方法です。
px指定に代わっていた幅と高さの値を『100%』と入力します。
そうする事で閲覧している端末の表示画面範囲いっぱいにテーブルを表示する事が出来ます。
相対値として入力するので見え方が端末に依存しないんですね。
まとめ
- テーブルを挿入する時は表のプロパティで幅を『100%』にする。
是非試してみてくださいね!
コメント