【WordPress】表・テーブルのレスポンシブ化！スマホではみ出るときの対策！

WordPress大好きっ子な四条せつなです。（この記事は前ブログからの移行ですっ！）

WordPressの“表の表示”がおかしくなっていることに今日気づきました。おそらく、この記事を見ている人も同じ現象が起こってしまったから、ご覧になっているんだと思います。スマホで「表が見切れてしまっている」んです・・・これは、痛恨のミス。スマホの表示バグは致命的ですね。

あわわ…見切れてる。
でも、ちゃんと表の設定をしてあげれば、簡単に「表のレスポンシブ化」できるから安心してねっ！

表を挿入するときに、ビジュアルエディタで表示設定を変えてあげればいいだけなんです、だから今回はWordPressで表・テーブルをレスポンシブ化する方法を説明します。これで、初心者脱出しましょう！

実は”WordPress標準の表”は「レスポンシブ」でない！

意外と気づかないままブログ運営やっちゃってたりするんですけど、WordPressの”標準の表”は「レスポンシブ」でないんです。つまり、横幅が固定されてしまっているんです。

これは、以前書いた記事なんです（しかも、前のブログ）けど、ご覧のようにPCでは、ちゃーんと表を綺麗に表示してくれています。

え？全然OKじゃん！これがスマホだとおかしくなるのー？

とか思ってしまいがちです。特に、WordPressで記事を編集するときは、たいていPCから操作していると思います。だから尚更、スマホでちゃんと表示されているかどうかの、確認を怠りがちです。

だから、確認を怠ると…

あわわ…完全に表が”見切れてる”じゃん…気づかなかった！

あらら、完全に見切れてしまっていますね。しかも、この表は単にはみ出しているだけじゃなくて、横にスクロールも出来ないんです。だから、スマホでは表が見れない状態に…困りものです。

そうなんです！WordPress標準の表機能では、”レスポンシブ対応になっておらず”、自分でレスポンシブに対応させてあげないといけないんです。意外と知られていないので、気をつけないといけないポイントですね。

表をレスポンシブするには「幅100%」でOK！

幅がpx指定されてるのが原因。

上の画像は、WordPressの記事投稿画面（ビジュアルエディタ）の「表のプロパティ」だよ！

見ていただければ分かるように、標準では幅が”ピクセル指定”になっています。そのせいで、スマホでその指定されている幅より狭くなってしまうと、「見切れる」という現象が起きてしまうわけなんです。

なので、“ピクセル指定”じゃなくて、“パーセント指定”してあげればいいんですね。

幅100%指定でOK！

WordPressのビジュアルエディタでの「表のプロパティ」で、幅を100%にすれば簡単にレスポンシブ化完了です。

表のレスポンシブ化って、めっちゃ簡単なんだね！
これなら、私でもできちゃう。あとは、忘れないようにしなきゃ（笑）

これでバッチリレスポンシブ化！

これで、先程と同じ表の表示を見てみると、ご覧の通り！ちゃーんと”レスポンシブ化”されていますね。めでたしめでたし。

WordPressの表が、標準ではレスポンシブ化されていないことに気づかないまま、記事を更新している人も多いと思います。なので、投稿前にはちゃんとレスポンシブ化されているかどうかを確認する癖をつけた方が、良さそうですね！

表を簡単作成できるプラグイン「TablePress」

正直、紹介した方法で表のレスポンシブ化をするのが、めんどくさい！という人もいると思います。ちまちまレスポンシブ化するのって、意外と手間になりますもんね。なので、そんな人には、「TablePress」というプラグインがおすすめです！

グラフィカルに表を作ることができますし、ブレークポイントも自分で好きなように設定できるおすすめプラグインです！

せつなのまとめ

WordPressの表が、デフォルトでレスポンシブ化されていないことは、意外と盲点ですよね。今回紹介した、表の横幅指定を「パーセント指定」にするだけで、簡単にレスポンシブ化されるので、表を挿入する際は気をつけておきたいですね。

つまりは…

• WordPress標準の表は、”レスポンシブ”でない！
• レスポンシブ化は、横幅100%指定でOK！
• 面倒なら「TablePress」を使う！

ということだねっ！

ということで、“【WordPress】表・テーブルのレスポンシブ化！スマホではみ出るときの対策！”でした！でわでわっ！