テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード
デモ (PCの場合はブラウザの幅狭めてみたりして確認してみてください。)

TablePress実装

1. 管理画面のTablePressのページから「新しく追加」でテーブルを作成し、以下を設定します。テーブルのヘッダー(フッター、両方)を使用する場合は、必要な行数分プラスしといて下さい。
テーブルの名前：説明 (省略可)：行数：列数：

TablePress-1

2. 「テーブルを追加」すると以下の画面に移るので、テーブルの値を入力を入力して下さい。
「テーブルの最初の行はテーブル見出しです。」にチェックを入れると最初の行はテーブルのヘッダーとして使用されます。フッタに設置する場合は、「テーブルの最終行は、テーブル フッターです。」にチェック
TablePress-3
TablePress-4
「検索/フィルター」をチェックしておくとテーブル内のデータを検索・フィルタリングしてくれるテキストボックスが生成されます。

3. 「変更を保存」して、"ショートコード"をコピーして、表示したい投稿にペーストしてください。

// 例
[table id=1 /]

レスポンシブ対応化

「TablePress Responsive Tables」をダウンロード・解凍し、pluginsディレクトリにコピーして有効化して下さい。あとはさきほどのShortcode:(ショートコード)に以下のようにresponsive="xxx"を付与して投稿に貼り付けるだけです。それぞれのブレークポイントでテーブルを横並びにしてくれます。

// 768px以下になるとテーブルを横向きにする場合
[table id=1 responsive="phone" /]
// 980px以下になるとテーブルを横向きにする場合
[table id=1 responsive="tablet" /]
// 1200px以下になるとテーブルを横向きにする場合
[table id=1 responsive="desktop" /]

スタイル変更

「プラグインのオプション」タブの"カスタムCSS"にスタイルを追加することで変更が可能です。
ドキュメント Documentation | TablePress
スタイリングやその他に関するよくある質問は、Frequently Asked Questions (FAQ) | TablePressを参照

管理画面は、標準で日本語化されているはずですが、そうでない場合は「プラグインのオプション」タブの"Plugin Language"から変更jaなどに変更が可能です。

その他 テーブル(表組)プラグイン
Websimon Tables

Related

CSS/JSをひとまとめにして軽量化するプラグイン「Minify plugin for CakePHP」 Default Thumbnailスライダー・ギャラリー プラグイン 投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ Twenty Fourteenカスタマイズ用プラグインと派生テーマ Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」 Default Thumbnailパーマリンク・スラッグなどURL カスタマイズ 「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
  • このエントリーをはてなブックマークに追加

関連記事

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

Twenty Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

多言語化プラグイン「qTranslate」

ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

Comment

  18. 「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。

kwski へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV
ウィジェット関連のカスタマイズ・プラグイン
NEXT
ツールチップ実装プラグイン「WordPress Tooltip」

新規投稿

  • ブックマーク

    PAGE TOP ↑