ワードプレスで記事投稿したテーブル(表)が、スマホで見たら「はみ出ている！」というときの対処法をご紹介します。
とても簡単なので、この記事は短いです(笑)
ワードプレス記事のテーブル(表)がスマホではみ出ている
ワードプレスのテーブルってそのままですと、スマホで見たときにはみ出してしまいます。
切れてしまうんです。レスポンシブに対応していないんですね。
私もこれで失敗してました(^-^;
パソコン画面でキレイに見えていたはずの表やテーブルが、スマホではなぜかはみ出ていましたよね？
がーーんって思いました。せっかく作った表なのに(笑)
あることをするだけで簡単にスマホでもきれいに収まる表(テーブル)になります！
簡単な方法をお伝えしますね。
ワードプレスでテーブルや表をレスポンシブ対応させるには…
本当に簡単なんですよ(笑)
ワードプレスの投稿画面にあるレスポンシブしたい表の一部をクリックして選択します。
「テーブル」⇒「表のプロパティ」を選びます。
幅の欄に、現在の表の幅を設定する数字が入力されています。ここを変更します。
「100％」と入力し「ＯＫ」をクリックします。
これだけなんですよ。ね？簡単でしょ(^^♪
念のためスマホで確認してみましょうね。ちゃんと画面内に収まっているはずです。
横に長い表をスマホでスクロールさせたい時は…
横幅が長い表を、スマホ画面内に収めずに横スクロールさせて見せたい時の方法です。
| このように | 横幅が長い | テーブルを | スマホでは |
| 画面に収めずに | クロールさせて | 見せたい時の | 方法です。 |
このように設定したい場合はHTMLとCSSを少しいじることが必要です。
Webコミュ様のサイトで詳しく解説がありますのでそちらをご参考にされると分かりやすいです。
⇒Webコミュ様
「スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS」
また、ワードプレスのテーマによっては最初からテーブルがスクロールする設定になっている場合もあります。
私がこのブログで使っているテーマはCocoon(コクーン)です。
無料ですがとても使いやすいです。
最初からテーブルがスクロールするように設定されていました。
レスポンシブ対応のテーブル(表)を作成できるプラグイン
レスポンシブ対応のテーブル(表)を作成できるプラグイン「TablePress」があります。
⇒「TablePress」公式サイト
※デモが見られます
表をよく利用される方はインストールして利用されても良いと思います。
インストールするときはワードプレス画面左の「プラグイン」⇒「新規追加」を選択。
「TablePress」と入力し「今すぐインストール」⇒「有効化」しましょう。
使い方はここでは詳しく説明しませんが、複雑で高度な表も比較的簡単に作成できます。
まとめ
スマホで見ると切れてしまうテーブル(表)をレスポンシブ化させる方法です。
①「表のプロパティ」から幅の欄に「100％」と入力する
②HTMLとCSSで横スクロールできるようにする
③プラグイン「TablePress」を使用する
以上3つをご紹介しました。
参考にしていただければ嬉しいです。
コメント