「TablePress」で簡単にレスポンシブ対応の表を作る拡張プラグイン「Responsive Tables」

TablePressは簡単に表をつくることができるWordPressプラグインです。
レスポンシブル対応のテーマは多いですが、表を作成した際には表は別途レスポンス対応を作成する必要があります。

レスポンシブ対応のプラグインとしては、FooTableというものがありますが、イマイチ使い勝手がしっくりこないので、調べるとTablePressのレスポンシブ対応の拡張プラグインにResponsive Tablesがありました。
基本インストールして終わりです。(レスポンシブ化終了^^)TablePressの使い方がそもそもわからないって人もいると思いますので以下からは、インストール編から掲載してます。

初心者編のための、TablePressレスポンシブルのダウンロード

TablePressプラグインよりダウンロード

Responsive Tablesをダウンロード

Responsive Tablesを解凍して、

・tablepress-responsive.min.css

・tablepress-responsive.css

・tablepress-responsive-tables.php をpluginフォルダにアップロード

(wp-content ➡ plugins➡TablePressの中です。)

Pluginの設定をする

さて、準備ができたら次はTablePressとTablePress Extension: Responsive Tablesを有効化にすると管理画面にTablePressが表示されます。

TablePress有効化

 

次に、管理画面のTablePressよりAdd Newをクリック
AddNewTable

 

表の作り方の設定は、Excelと同じです。
TablePress表作成画面

SAVE CHANGE ボタンは忘れずに押して下さいね。

スレスポンシブ表作成ショートコード
ショートコードを記事に貼付ければ表が完成します。

 

完成、画面に合わせて表が伸縮すればOK。スマホもバッチリ対応の表が完成しました。

[table id=1 /]

この記事を書いた人

tsubasatwi( つばさ)

国立工業高専卒業(新居浜工業高等専門学校)
「イベント×IT×営業」のカスタマーサクセスマネージャーとして活躍。セールス→構築管理運用まで全体プロジェクト管理の豊富な経験あり。

・主にITに関するイベント集客/法人営業/開発を担当
・大手通信会社を中心にエンタープライズのIT導入を担当(B2B)

DMMで日本初の NoCodeサロン を運営
「NoCodeCamp プログラミングを使わないIT開発 」
https://lounge.dmm.com/detail/2549/