ワードプレスブログで作成したテーブル機能。
表を作る時に非常に便利ですよね。しかしちょっと困った時がありますよね。
パソコンで見ると綺麗に出来てるのにスマホで見ると表がズレたり、見切れたりしてします(◎_◎;)!
本日はそんな方のために対処法について解説したいと思います!
めちゃめちゃ簡単なので是非ご覧ください(^^
WordPressのテーブルでズレる,見切れる時の対処法 レスポンシブ設定で簡単解決
それではワードプレスのテーブルでスマホ時ズレる、見切れる時の対処法について説明したいと思います。
まず、PCで表示した時のテーブル表示はコチラ。
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/03/2019y03m16d_210222910.jpg)
全然ズレてませんね。これがスマホで表示すると…
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/03/写真-2019-03-16-21-02-12.png)
ズレっちゃっとる(゚д゚)!
これをどうにかする方法はないものか…と私は最初めっちゃ悩みました。
しかし、解決方法はとっても簡単でした。
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/03/2019y03m16d_210528884.jpg)
まず、作成した表を選択して「表のプロパティ」を選択しましょう。
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/03/2019y03m16d_210742416.jpg)
表のプロパティの中に幅という項目があるのでここを「100%」と入力しましょう。
そうすると…あら不思議
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/03/写真-2019-03-16-21-11-42.png)
見切れていたテーブルの表示が綺麗に表示されるようになりました。
やってみるとめちゃめちゃ簡単ですよね(^^
もちろんこのPCの表示もそのままですので、ご安心ください。
つまりレスポンシブ化されているということです。
わからない人のために説明しますが、レスポンシブ化というのはPCやスマホ、タブレット等の異なる画面サイズの幅を見やすいように調整してもらえる機能のことです。
うーん、レスポンシブ化というのは何と便利な機能なんでしょうか。これを人間の手で調整するのは難しいので本当に助かりますね(^^
最近の自動で調整できるのが多いので本当に助かりますね。
個人的にはサイトの調整で難しいところは外注化&自動化しています。
その方法について知りたい方はお気軽にお問い合わせからご質問ください。
どんな軽い相談でも必ず返信しますので、お気軽にお問い合わせくれれば私としても嬉しいです(^^
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](http://sidebisfree.com/wp-content/uploads/2019/01/img_visual_02.jpg)
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://sidebisfree.com/wp-content/uploads/2019/12/2019y12m26d_033012104.jpg)
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](http://sidebisfree.com/wp-content/uploads/2019/01/img_visual_02.jpg)
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](http://money.blogmura.com/pocketmoney_salaryman/img/pocketmoney_salaryman88_31.gif)
![[Tags] button-only@2x WordPressのテーブルでスマホ表示がズレる,見切れる時の対処法…レスポンシブで簡単解決!](https://blog.with2.net/img/banner/c/banner_1/br_c_1543_1.gif)