テーブルや表がスマホではみ出ている時の対処法【ワードプレスで表をレスポンシブ化】

表やテーブルがスマホではみ出している時の対処法 WordPress

ワードプレスで記事投稿したテーブル(表)が、スマホで見たら「はみ出ている!」というときの対処法をご紹介します。

とても簡単なので、この記事は短いです(笑)

ワードプレス記事のテーブル(表)がスマホではみ出ている

ワードプレスのテーブルってそのままですと、スマホで見たときにはみ出してしまいます。

切れてしまうんです。レスポンシブに対応していないんですね。

 

私もこれで失敗してました(^-^;

 

パソコン画面でキレイに見えていたはずの表やテーブルが、スマホではなぜかはみ出ていましたよね?

 

がーーんって思いました。せっかく作った表なのに(笑)

 

あることをするだけで簡単にスマホでもきれいに収まる表(テーブル)になります!

スマホで見るとはみ出る表を簡単に直す

簡単な方法をお伝えしますね。

 

 

ワードプレスでテーブルや表をレスポンシブ対応させるには…

本当に簡単なんですよ(笑)

ワードプレスの投稿画面にあるレスポンシブしたい表の一部をクリックして選択します。

 

「テーブル」⇒「表のプロパティ」を選びます。

テーブルをレスポンシブ対応する方法

 

幅の欄に、現在の表の幅を設定する数字が入力されています。ここを変更します。

表をレスポンシブ対応する方法

 

「100%」と入力し「OK」をクリックします。

表をレスポンシブ対応する方法

 

これだけなんですよ。ね?簡単でしょ(^^♪

 

念のためスマホで確認してみましょうね。ちゃんと画面内に収まっているはずです。

スマホで見るとはみ出る表を簡単に直す

 

 

横に長い表をスマホでスクロールさせたい時は…

横幅が長い表を、スマホ画面内に収めずに横スクロールさせて見せたい時の方法です。

このように横幅が長いテーブルをスマホでは
画面に収めずにクロールさせて見せたい時の方法です。

 

このように設定したい場合はHTMLとCSSを少しいじることが必要です。

 

Webコミュ様のサイトで詳しく解説がありますのでそちらをご参考にされると分かりやすいです。

 

Webコミュ様
「スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS」

 

また、ワードプレスのテーマによっては最初からテーブルがスクロールする設定になっている場合もあります。

 

私がこのブログで使っているテーマはCocoon(コクーン)です。

無料ですがとても使いやすいです。

 

最初からテーブルがスクロールするように設定されていました。

⇒「コクーン」ダウンロードの公式サイトはコチラ

 

 

レスポンシブ対応のテーブル(表)を作成できるプラグイン

レスポンシブ対応のテーブル(表)を作成できるプラグイン「TablePress」があります。

 

「TablePress」公式サイト
※デモが見られます

表をよく利用される方はインストールして利用されても良いと思います。

 

インストールするときはワードプレス画面左の「プラグイン」⇒「新規追加」を選択。

「TablePress」と入力し「今すぐインストール」⇒「有効化」しましょう。

複雑な表を簡単に作るプラグイン

 

使い方はここでは詳しく説明しませんが、複雑で高度な表も比較的簡単に作成できます。

 

 

まとめ

スマホで見ると切れてしまうテーブル(表)をレスポンシブ化させる方法です。

 

①「表のプロパティ」から幅の欄に「100%」と入力する

②HTMLとCSSで横スクロールできるようにする

③プラグイン「TablePress」を使用する

 

以上3つをご紹介しました。

参考にしていただければ嬉しいです。

コメント