TablePressのテーブルをレスポンシブにしてスマホに対応しよう

  • 0
  • 4
  • 0
  • 28

tablepress-extension

WordPressのプラグインTablePressで、レスポンシブウェブデザインに対応したテーブルを作成する方法を説明します。

TablePressの基本的な使い方はこちらを参考にしてください。
TablePressでWordPressにテーブル(表)を作成!



レスポンシブ対応のデモ


名前出身身長体重年齢
A子東京1544623
B美茨城1504917
C代群馬1544335
D福岡1655028
E埼玉1484628
F高知1555142
G愛媛1494867
H沖縄1534614
I千葉1524395
J岐阜1484124
K三重1555524
L千葉1525226
M北海道1665137
N熊本1634232
O和歌山1675126
P大阪1514627
Q鳥取1564828
R島根1705016
S山口1483924
T佐賀1494241


PCで閲覧中の場合、ブラウザの幅を狭めていくと、上の表がレスポンシブ対応になっているのが分かると思います。

ブラウザの幅が768pxになった時点で、縦に並んでいた内容が、横に並ぶようになります。

さらに幅をせばめて表が画面に入りきらなくなると、横スクロールバーが出てきます。この時テーブルのヘッダーは固定なので、スマホでも表が見やすいです。




TablePressのテーブルをレスポンシブ対応にする手順

TablePressが既にインストールしてあるとして、以下の手順でレスポンシブ対応していきます。

  1. TablePressをレスポンシブ対応させる拡張プラグインをダウンロードする
  2. 拡張プラグインをインストール&有効化する
  3. ショートコードにブレークポイントの属性を記述する
  4. デフォルトの行数を調節する



1.レスポンシブ対応させる拡張プラグインをダウンロードする

tablepress-extension01

Responsive Tables | TablePress

上のURLからTablePress作者のページへ移動し、「Download:Responsive Tables Extension 1.2」をクリックしてダウンロードします。(バージョンは変わっている場合があります)



2.プラグインをインストール&有効化する

tablepress-extension02

WordPressのダッシュボード → プラグイン → 新規追加 → プラグインをアップロード と移動し、「ファイルを選択」をクリックします。

先ほどダウンロードしたプラグインのzipファイルを選択して、「いますぐインストール」ボタンを押します。

インストールできたら有効化しておきましょう。



3.ショートコードにブレークポイントの属性を記述する

テーブルを挿入するときのショートコードに、以下の様な属性を記述します。

responsive="phone"
responsive="tablet"
responsive="desktop"

それぞれブレークポイントの数値が違うので、自分のサイトのブレークポイントに近いところを指定しましょう。



<記述の例>

[table id=sample1 responsive="phone" /]
ブレークポイント:768px

[table id=sample2 responsive="tablet" /]
ブレークポイント:980px

[table id=sample3 responsive="desktop" /]
ブレークポイント:1200px



4.デフォルトの行数を調節する

デフォルトで表示するテーブルの行数を設定します。

この設定はしなくてもいいですが、テーブルの行数が多い時は有効にしておいた方が見やすいかと思います。



tablepress-extension03-2

ダッシュボード → TablePress → すべてのテーブル → 該当のテーブルの「編集」と移動します。



tablepress-extension04

下の方にある「DataTables JavaScriptライブラリの機能」で、「DataTablesを使用」にチェックを入れます。

「ページ番号」にチェックを入れ、デフォルトで表示するテーブルの行数を設定します。

また、「ページ分割の行数を変更」にチェックを入れると、ユーザーが表示する行数を変更できるようになります。



※1 セルを結合している場合、この機能は使えません。

※2 「水平スクロール」機能も使えそうだったのですが、私の環境ではスマホ表示のレイアウトが崩れました。



これで拡張プラグインを使ったレスポンシブ対応は完了です。




レスポンシブ対応の注意点

ブレークポイントは前述の3通りありますが、幅の数値を自分で決めることはできません。

当サイトが使っている賢威6.1テンプレートだとブレークポイントは640pxなので、テーブルとテンプレートでそれぞれブレークポイントが別になってしまいます。

このあたりは近いところで妥協するしかないですね。



また、テーブルの内容によっては、このレスポンシブ対応だとデザインが適さないシーンもありそうです。

特に「横に長い」「横にも縦にも長い」テーブルに適用すると微妙な感じになるかも。

その場合は次のような方法があります。




「横に長い」テーブルを、スマホでもそのまま表示する方法

ここからの方法は、先ほどのプラグインをインストールする必要は無いです。

次の表は、「画面からはみ出た部分はスクロールで表示させる」というCSSの指定をしています。



ブラウザの幅を狭めると横スクロールバーが出てきます。(内容の向きはそのままです)

名前出身身長体重年齢生年血液型
A男東京18060231984A
B茨城16655261990B
C群馬17063351955AB

※画面の幅が小さいとき、この表は横にスクロールできます。



以下、やり方です。

TablePressのショートコードをdivタグで囲って、overflow:scrollを指定しています。

<div style="overflow: scroll;">
[table id=sample4 /]

</div>

参考
tableをレスポンシブでも破綻しないようにする簡易的な1手法 | webutubutu




テーブル全体の幅を指定しないと、ブラウザに合わせてテーブルも縮尺してしまうので、指定しておく必要があります。

TablePress → プラグインのオプション と移動し、カスタムCSSに以下のように書いて変更を保存します。


.tablepress-id-sample4 {
width: 570px;
}



この方法なら記述もごく簡単ですし、「横に長い」表をスマホで見せるのに適していると思います。先ほどのプラグインを使った方法と、シーンに合わせて使い分けてください。




おわり

レスポンシブ・ウェブデザインを考えると、tableタグは扱いが難しいです。スマホで見ると表がカラム幅をはみ出してるサイトもたまに見かけますよね。

今回のような方法を使って、スマホでの見え方も意識したテーブルを作成していけるようにしましょう。


関連記事
TablePressでWordPressにテーブルを作成する方法
TablePressのテーブル幅や背景色を変更する方法



  • 0
  • 4
  • 0
  • 28




コメントを残す

コメントは承認制です。日本語が含まれない投稿は無視されます。(スパム対策)

サブコンテンツ

このページの先頭へ