© TamKid.com All rights reserved.

PI_02_201505021704

20155/3

2,698 views

【WordPress】TablePressで2カラム(セル)表組みレスポンシブ化


TablePressって本家からレスポンシブ対応の追加プラグインが出ているんですね!?

TablePress Responsive Tables

本家サイトからダウンロードできる。

tp_201505022009

ダウンロード&プラグインインストールは、FTPなどで wp-content >> plugins に解凍したフォルダを入れて、場合によってはアクセス権を適正に整える。もしくはWordPressの管理画面の プラグイン >> 新規追加 からzipに圧縮したダウンロードデータをアップロードして、いずれも管理画面のプラグインで有効化すればOK。詳しくは……

TablePress レスポンシブ対応 (TablePress Extension: Responsive Tables)

では、詳細に説明されているので参照されるとわかりやすいです。ボクはだいたいこのやり方でアップロード&有効化しちゃいますね。

 

で、本題。

今回、2カラム(セル)の表組みを作ることなった。条件としては、

1. 運用はあまりWebリテラシーが高くない人が運用

簡単に表組みが作れるもしくは修正ができる

2. PCユーザーでも閲覧されるが、スマホ&タブレットユーザーが多い

レスポンシブ対応

ちなみにこんな表組み。

見出し01200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。
見出し02200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し03200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し04100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し05見出し見出し見出し見出し見出し見出し
見出し06【見出し見出し見出し見出し見出し見出し】
20w位入ります20w位入ります
20w位入ります20w位入ります
20w位入ります20w位入ります
見出し07【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し08【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し09【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し10【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】

そこで、TablePressをインストールすることにした。
[ ボクが便利だなぁって思ったことはこちら >> 【WordPress】表組みが簡単にできるTablePress ]

そして、1. に関してはTablePressの地点でOKだが、2. をどうしようかと考えていたら、先ほど紹介したサイトを発見。なんだなんだ、レスポンシブ対応しちゃってるじゃんと早速インストールしてみると……、

あ、あれ? ちょっと違う…………….

見出し01200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。
見出し02200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し03200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し04100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し05見出し見出し見出し見出し見出し見出し
見出し06【見出し見出し見出し見出し見出し見出し】
20w位入ります20w位入ります
20w位入ります20w位入ります
20w位入ります20w位入ります
見出し07【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し08【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し09【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し10【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】

上記サイトで紹介されているように、縦列×横列がたくさんあるような表組みだとスマホでは横スライドすることで見やすくなる。しかし、2カラム(セル)の表組みでは縦が短くなって横が長くなってスライドさせるので、かえって見にくくなった……

さて、どうしたものかっと。

単純にスマホでは2カラム(セル)のそれぞれのカラム(セル)がBlock化されて、左右のカラム(セル)が上下の組みにして並べ替えたいだけだからね……

タグ打ちの表組みの場合はなら、CSSでブレイクポイント作っちゃえばいいんだよね……。TablePressのカスタムCSSでうまいことできないかと考えてみた。

CSSで出来るレスポンシブ対応を考えた table レイアウト

上記サイトが参考になりました。

 TablePressのカスタムCSSでブレイクポイントを作る。

tdとthの考え方がちょっとTablePressと違うので、そこを改変。

見出し01200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。
見出し02200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し03200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。200w位の文章が入ります。

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります

【見出し見出し見出し見出し見出し見出し】
100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し04100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります100w位入ります
見出し05見出し見出し見出し見出し見出し見出し
見出し06【見出し見出し見出し見出し見出し見出し】
20w位入ります20w位入ります
20w位入ります20w位入ります
20w位入ります20w位入ります
見出し07【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し08【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し09【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
見出し10【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】
【見出し見出し見出し見出し見出し見出し】

スマホで見ると、1列になりました。良かった、良かった。

今回のボクの表組みは見出し行がなかったので、tdだけでいけちゃいましたが、見出し行のある表組みはおそらくth記述が必要だと思われます。


The following two tabs change content below.

清沢 たもつ

代表取締役社長株式会社イーグル
(きよさわ たもつ)1971年生まれ。2005年10月代表取締役社長に就任。瀬戸まなぶをパートナーとしたDesign会社であったが、高橋浩司(編集者)/木村博道(Photographer)が入社後、編集プロダクションへ。Art Director / Graphic Designerに従事し、Web Designやシステム設計、LAN設計を行う。Designerだが、会社経営とネットワークを中心としたsystem Engineer的な仕事も得意としている。

関連記事

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

  1. この記事へのトラックバックはありません。

menu-search_201505102208

20155/10

【WordPress】グローバルメニューに検索

自社で求人のサイトを作ってみよう!っと3週間前に社内で展開して、その間に校了がいくつかあって、さらにGWと……。なんやかんやで実質、1週間ぐ…

1,963 views

bn_201505062134

20155/6

【WordPress】Breadcrumb NavXTをリッチスニペットに対応させる

いわゆるSEOについて考え、ネットでいろいろと見ていると、テクニック的な要素としてリッチスニペットの話をよく見かける。リッチスニペットとは …

2,078 views

imac_yosemite

20154/11

【Mac】Yosemite Server Part.2

先日、作業用のiMacからOS X Yosemite 10.10.3へのアップデートのアラートが! OS X Yosemite とりあえ…

693 views

mobile01

20153/29

【WordPress】レスポンシブ対応

仕事で込み入っている最中…… 普段はまったくこないGmailアカウントにメールが突然やってきた。 何だと思ってメールを確認してみると…

737 views

eg7

20153/4

【WordPress】Google+バッチ

サイトデザインリニューアル テストサイトとしてこのサイトを立ち上げている。近々に弊社管理のサイトをリニューアルするのでそのテストとしてこち…

708 views

ページ上部へ戻る