「TablePress」でつくった表のレスポンシブ対応

先日「TablePress」のレスポンシブ対応について検討したときに参考にした記事は古かったようで、「TablePress」は、今はもっと進化しているみたいだったので、「TablePress」でつくった表のレスポンシブ化に挑戦してみました。

「TablePress」のレスポンシブ対応デザインは下記の３種類があるようです。

• flip
• scroll
• collaps

こんなレンタルサーバーの比較表をつくってみたので、
今回はこれで検証してみたいと思います。

	ヘテムル	エックスサーバー	wpX	ロリポップ！	さくらのレンタルサーバ
プラン名	-	X10プラン	wpxレンタルサーバー	スタンダード	スタンダード
容量	256GB	200GB	30GB	120GB	100GB
初期費用	3,950 円	3,000円	5,000円	1,500円	1,029円
最短契約期間	3ヶ月	3ヶ月	3ヶ月	1ヶ月	１ヶ月
月額費用	1,500 円	1,200円	1,200円	600円	515円
一括支払時の月額料金	36ヶ月：1000円 24ヶ月：1,375 円	36ヶ月：900円 24ヶ月：950円 12ヶ月：1,000円 6ヶ月：1,100円	12ヶ月：1000円	6ヶ月以上：500円	12ヶ月：429円
MySQL	100個	50個	WordPress数：10件 MySQL容量：500MB	30個	20個
ドメイン数	無制限	無制限	10個	100個	20個
無料お試し	15日間	10日間	14日間	10日間	2週間
独自SSL	1年： 18,000円～	無料	無料	1ヶ月： 2,000円～	1ヶ月： 515 円
電話サポート	○	○	○	○	○

（費用は、「さくらのレンタルサーバ」のみ税込表示）

 

この表をレスポンシブ対応しないでiPhone5で見るとこんな感じ。

右にはみ出しまくっています。

 

そこで「TablePress」の拡張プラグインをインストールします。

いつものWordPressの「新規追加」から検索しても、
登録されていないみたいで、出てきません。

下記サイトからダウンロードして「プラグインのアップロード」で
そのファイルを追加してインストールします。

TablePress 公式サイト

 プラグイン画面の上部の「新規追加」ボタンをクリック。

「プラグインのアップロード」をクリック。

「ファイルを選択」で「TablePress」の公式サイトからダウンロードした
zipファイルを選択して「今すぐインストール」をクリック。

「プラグインを有効化」をクリック。

 

これでレスポンシブ機能が使えるようになりました。

表をレスポンシブ対応するには、ショートコードを少し書き換える必要があります。

ショートコードは①または②のようなかたちに書き換えます。

modeの部分は、下記のいずれかを選んで書き換えます。

• flip（縦横のレイアウトが変わり、水平スクロールするかたちになります）
• scroll（はみ出た部分を水平スクロールで閲覧するかたちです）
• collapse（＋とーで表示させたり隠したりするかたちです）

modeで「flip」を選択した場合、deviceの部分は下記のいずれかを選択できます。

• phone（画面サイズが、768px未満）
• tablet（画面サイズが、980px未満）
• desktop（画面サイズが、1200px未満）
• all（全ての画面サイズ）

指定しない場合は「all」になるのだと思います。

どんな表示になるのか、横幅の狭いiPhone5縦型で実際に試してみました。

こちらは、今まで見たこともないような奇抜なタイプの表です。

最初は、よくわからなかったのですが、
どうも画面に表示しきれなかった項目のみ、
リストのかたちで表示されるようです。

iPhone5縦は画面が狭いので、項目が１列しか右に表示できず、
あとの4列はリストになっています。

リストは、緑色の＋印をクリックすると開き、
赤色のー印で収納できます。

---

３つのレスポンシブタイプを試してみた感想ですが、
なんだか正直どれもいまいち使う気になれない感じでした。

好みによりますが、私はあえて選ぶとしたら「scroll」かな。
３つの中では「scroll」が一番ましだと感じますが、
個人的には、スクロールさせるタイプのレスポンシブ対応よりは、
画面内におさまる方がいいなと思います。

ただ、面白いことは面白いので、今後こういう表示をさせたい
と思うような機会が巡ってくれば、使ってみようと思います。