テーブル実装プラグイン「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」
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Thirteen ナビゲーションメニューを固定

ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade

画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

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

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

no image

アイキャッチにマウスオーバーすると投稿タイトルを表示

WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

Comment

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

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

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑