WordPressで表(テーブル)が画面からはみ出る時の対処方法

2021年6月6日

WordPressで表(テーブル)が画面からはみ出る

やなけん(@yanaken8787)です。

ちょっと前に書いた記事ですが、表の作成にずいぶんと苦労しました。

何が苦労したって、、

表がはみ出ちゃうのですよ。

スマホで見てもこんな感じ。

表の続きがありそうなのに、続きが表示できないジレンマ😂

やなけん
やなけん
せっかく苦労して表を作ったのに・・・

表で苦労するのは精神衛生上よろしくないので、プラグインを使用する事にしました。

いくつか表を作成するプラグインはあるのですが、今回TablePressというのを使ってみました。

表を簡単に作成できる、TablePress

WordPressを使っている人は、TinyMCE Advanced等をインストールしている人が多いと思いますが、表を作成する時に苦労することありませんか?

りんご みかん バナナ ぶどう もも マンゴー メロン すいか いちご レモン
3個 4個 5房 1房 2個 2個 1玉 1玉 2パック 3個

WordPress表のレスポンシブ

列の少ない表であれば、表のプロパティで幅を指定する欄に「100%」と入力すれば良いのですが、列が多い表では、スマホで閲覧した時に、表の続きが表示されない時があります。

この修正に時間を要し、イライラするのです!😱

そこで、極力無駄な時間を省こうと思い、導入したのがTablePressです。

TablePress Extensionもインストールしよう

TablePress自体は、使い方は見ればわかるので割愛しますが、画面からはみ出しちゃう問題は解決されません。これだと今までと一緒。

TablePressの公式サイトからエクステンションを追加する事で、簡単にレスポンシブな表を作成する事が可能になります。

TablePress

TablePress

ファイルをダウンロードしたらZIPファイルは解凍せずに

WordPressの管理画面から「プラグイン」「新規追加」「プラグインのアップロード」を選択後、「ファイルを選択」で選んで「今すぐインストール」を実行します。

追加したExtensionの設定は特にないので、TablePressで表を作成します。

TablePressで作った表をレスポンシブ表示する

TablePressで作った表を挿入するには、ショートコードを用います。

TablePress表のレスポンシブ

アイコンをクリックすると該当のテーブル名が表示されるので、クリックすると自動的に下記のようなショートコードが挿入されます。

[table id=0 /]

 

りんごみかんバナナぶどうももマンゴーメロンすいかいちごレモンイチジクパイナップルさくらんぼ
3個4個5房1房2個2個1玉1玉2パック3個4個2個2個1パック

単に表を挿入すると、列の長い表は画面からはみ出てしまい、見ることができません。

そこで、さきほど追加インストールしたTablePress Extensionが威力を発揮するのです😀

さきほど、自動挿入されたショートコードに

「responsive=scroll」を追記します。

[table id=0 responsive=scroll/]

 

りんごみかんバナナぶどうももマンゴーメロンすいかいちごレモンイチジクパイナップルさくらんぼ
3個4個5房1房2個2個1玉1玉2パック3個4個2個2個1パック

表は右にスクロールできます。

これで、スマホで閲覧した時もスクロールする事で表の表示が可能になりました😆

めでたしめでたし。

さいごに

表が上手に作成できない…こんな悩みで時間を無駄に使ってしまうのはモッタイナイ!

プラグインは必要最低限で済ませたいのですが、使用テーマによってはTablePressとTablePress Extensionをインストールをした方が、より見やすい表を簡単に作成できます。

表作成で悩んでいる方は、ぜひ参考にしてください!

デジタル

Posted by やなけん