スポンサードリンク


TablePressをスマホ対応!レスポンシブな表作成プラグイン!

WordPressのブログでテーブルを使いたいことがあると思います。

標準機能で表を作ることができますが、正直言って微妙。

 

CSSファイルでテーブルのデザインを設定しておいても、

毎回tableタグにidやclass属性を定義しなくてはならないし、

テーブルを作る分だけ、CSSを記述する必要があり、ものすごく面倒だ。

 

TablePressを使えば簡単に表が作成できる!

TablePressというWordpressのプラグインをご存知でしょうか?

このプラグインはとても便利で、簡単に表を作ることができますよ!

 

 TablePressのすごいところは以下の通り

    • 列数・行数を簡単に設定できる。
    • 見出し(th)を指定できる。
    • セル同士の結合も可能。
    • データ項目を何件ずつ表示させるか設定できる
    • CSSで自由にデザインできる。

 

詳しいことはこちらの記事で紹介しています。

 

TablePressをレスポンシブデザイン化してスマホ対応させる!

便利なTablePressですが、実はスマホに対応していない

と言うのも、スマホでTablePressを使用した表を見ることはできます。

しかし、文字数が多かったりすると、スマホの画面に収まりきらず、一部分表示されません。

 

こんな感じですね。

Wordpress TablePress

 

表が画面外にいってしまい、切れてしまいます。

スマホのように画面サイズが小さい端末では、

表示しきれなくなってしまいこのようなレイアウト崩れが発生します。

 

Responsive Tables!スマホ対応できるプラグイン!

スマホでもレイアウト崩れなく見るようにするには、レスポンシブ対応にしなくてはならない。

調べるとTablePressのレスポンシブ対応の拡張プラグイン

Responsive Tablesがというものがありました。

 

ただインストールするだけで終わりです。

面倒な設定もする必要はありません。

 

スポンサードリンク

 

Responsive Tablesのインストール!

TablePressをインストールしたことを前提で説明致します。

 

Responsive Tablesをダウンロード。

②Responsive Tablesを解凍し、以下のファイルをPluginフォルダに配置。

  • tablepress-responsive.min.css
  • tablepress-responsive.css
  • tablepress-responsive-tables.php

wp-content -> plugins -> TablePressの中

 

以上でインストールは終わりです。

 

Responsive Tablesを有効化する!

TablePress 有効化

Wonrdpresの管理画面の「プラグイン」で

TablePress Extension: Responsive Tablesを有効化して下さい。

TablePressも有効化しておくこと。

 

TablePressで表を作成するだけ!スマホ対応!

インストールが終わったら、通常通りテーブルを作成するだけ!

TablePress テーブル作成

本当にただインストールするだけで、レスポンシブ化できるのでありがたいですよね。

試しにスマホ画面でどんな風に見えるのか確認してみることに!

TablePress レスポンシブ

 レイアウト崩れなく、表示されました~!

私もTablePressはかなりの頻度で使うので。これはかなり便利です!

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


コメントを残す




*

このページの先頭へ