Table Pressで作成した表をレスポンシブ対応する為の拡張プラグイン

Web制作

こんにちは。
Web制作者のhikaruです。

ここでは、Table Pressで作成した表を、レスポンシブ対応する為の、
プラグインを紹介してきます。

拡張プラグイン Responsive Tablesインストール

プラグインはここからダウンロードできます。

サイトにアクセスして右上のdownloadを選択後、プラグインのダウンロードが始まります。

ダウンロード完了を待つ。

管理メニュー > プラグイン > 新規追加 > プラグインのアップロード を選択して、ダウンロードしたプラグインをアップロードします。

4種類のレスポンシブ モード

Responsive Tablesには、4種類のレスポンシブモードが用意されています。詳しくはこちら

適応するには、ショートコードに、次のように入力します。

flip

[[table id=1 responsive = flip /]]

scroll

[[table id=1 responsive = scroll /]]

collapse

[[table id=1 responsive = collapse /]]

stack

[[table id=1 responsive = stack /]]

ブレークポイント設定

flip、stackモードには、ブレークポイントを設定できます。

ブレークポイントの種類は次の通りです。

  • phone : 「画面幅768px未満で適応」
  • tablet : 「画面幅968px未満で適応」
  • desktop : 「画面幅1200px未満で適応」
  • all : 「すべての画面幅で適応」

適応するには、ショートコードに、次のように入力します。

phone

[[table id=1 responsive = flip responsive_breakpoint = "phone" /]]

tablet

[[table id=1 responsive = flip responsive_breakpoint = "tablet" /]]

desktop

[[table id=1 responsive = flip responsive_breakpoint = "desktop" /]]

all

[[table id=1 responsive = flip responsive_breakpoint = "all" /]]

最後に

Responsive Tablesは開発のための寄付を募っているようです。

便利なプラグインなので、開発を応援したい場合は寄付してみるのもいいでしょう。

今日はここまで。

読んでくれてありがとう。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP