お問い合わせはコチラから

TablePressのレスポンシブ対応は?拡張アドオンでできます

サイト運営

WordPressでテーブル作成する有名なプラグインにTablePressがあります。TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。

このプラグインは別プラグインでレスポンシブ対応できるaddonがありますが、実はあまり知られていないようなのでご紹介します。

TablePressプラグインには拡張プラグインがある

まず、TablePressを知らないという方は、以下の公式に登録されているので必要に応じてインストールしてください。

TablePressには様々な拡張プラグインがあります。

Responsive Tableアドオンもその一つです。

Premiumと書かれているアドオンは寄付を募っているので便利だと思って使い続けるのであれば寄付した方が良いかもしれません。

Frontend table behavior

More features for the DataTables JavaScript library

Compatibility with other plugins

Adjustments for the admin area of TablePress

Responsive Tableアドオン

Responsive Tables Extensionは、これを回避するための4つのアプローチを提供します。

Responsive Tableのインストール

こちらからプラグインのzipファイルをダウンロードします。

次に、Wordpressのプラグイン追加を選び、アップロードしてインストールして有効化すればOK。

Responsive Tableの4つのレスポンシブモード

最初の3つのモードでは、ソート、フィルタリング、ページネーションが引き続き機能します。しかし、stackモードはソートができません。

  • flip:このモードでは、拡張機能はテーブルを横に反転し(行は列として表示され、逆も同様)、水平にスクロール可能にすることで、テーブルのレイアウトを変更します。このモードは、プレーンなデータ/テキストテーブルには適したソリューションですが、通常、画像を含むテーブルではうまく機能しません。
  • scroll:このモードでは、幅が広すぎて水平方向に完全に表示できないテーブルが作成されます。これにより、ユーザーはすべてのテーブルデータにアクセスできます。これは、画像が自動的にサイズ変更されない場合、通常、画像を含むテーブルに適したアプローチです。
  • collapse:このcollapse方法では、表に非表示/展開効果を追加できます。それ以外の場合は切り捨てられる列からデータを非表示にし、代わりに各エントリの下に挿入される折りたたみ可能な行にそのデータを追加します。その行は、「+」および「-」ボタンで表示および非表示にできます。このモードは、ディレクトリテーブルなど、一部の「メイン」列の追加情報を表示するテーブルで特に役立ちます。
  • stack:このstackモードでは、行のセルが隣同士ではなく、互いの上に表示されます。これにより、列が1つしかないように見えるため、テーブルがより狭くなります。ただし、テーブルヘッド行の列ヘッダーセルは表示されないため、この方法は、ディレクトリテーブルなどの情報が簡単に認識できるテキストデータに最適です。

Responsive Tableの使い方

使い方は、簡単です。

TablePressのショートコードに、レスポンシブのモードとブレークポイントのオプションを指定します。

設定

[table “123” not found /]
responsiveオプション

modeflipscrollcollapse、またはstackのいずれかを指定します。

responsive_breakpointオプション
  • phone:携帯電話(画面幅が768ピクセルより小さいデバイス)のみレスポンシブが有効になります。
  • tablet:携帯電話とタブレット(画面幅が980ピクセル未満のデバイス)のみレスポンシブが有効になります。
  • desktop:携帯電話、タブレット、およびデスクトップモニター(画面幅が1200ピクセル未満のデバイス)でのみレスポンシブが有効になります。
  • all:画面サイズに関係なく、すべての画面でレスポンシブが有効になります。

設定例

[table “123” not found /]

まとめ

TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。

今回ご紹介したResponsive Tableアドオンを導入することですべてのデバイスでテーブルを見やすく表示できるようになりますので、是非試してみてください。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました