Googleがレスポンシブ対応のサイトを様々な面から優先させるなど、近年ますまず重要性が高まるレスポンシブデザイン。

ただレスポンシブデザインを行なう時、意外と困るのが表組をレスポンシブ対応にすることではないでしょうか。

 

表組をPCやスマートフォンなど様々な大きさの画面に対応させるのは意外に難しいですが、

今回はプラグインで簡単に対応できるものをご紹介します。

(WordPressプラグインなので、WordPressで作成されたウェブサイトに限り有効な手段です)

 

まずは”TablePress”のインストール

 

”TablePress”をインストールすると、メニューに”TablePress”の項目が現れますので、

そこで下の画像の様にテーブルを作成できます(ショートコードを追加する形式)

 

作成自体はとてもシンプルなので、次に進みます。

 

 

スクリーンショット 2014-11-09 7.04.16

 

 

 

 

 

 

 

 

 

レスポンシブに対応する機能を追加する

TablePressにはtablepress-responsive-tablesという追加機能があり、これを追加することで

レスポンシブ対応した表組が作成できる様になります。

 

リンク先の”Download”からファイルをダウンロードし、サーバーのpluginsディレクトリにアップし、

管理画面から”TablePress Extention:Resposive Tables”を有効化します。

 

スクリーンショット 2014-11-09 7.21.07

 

 

するとショートコードに画面幅が追記できる様になりますので、それで準備完了です!

(2014/11/7時点で、IEには対応していないと記述がありますので、IE対応したい場合は追加設定が

必要になる様です。)