こんにちは。
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は開発のための寄付を募っているようです。
便利なプラグインなので、開発を応援したい場合は寄付してみるのもいいでしょう。
今日はここまで。
読んでくれてありがとう。
コメント