WordPressプラグイン

レスポンシブ対応の「表」を簡単に作れる!「TablePress」プラグインを徹底解説!

こんな方に読んで欲しい!

  • WordPressの「表」を、スマホで綺麗に表示させたい!
  • セルの結合がうまくいかない
  • 表の装飾やメンテナンスを簡単にしたい
  • 量の多いデータをブログで見られるようにしたい

ブログに表を挿入し公的なデータをユーザーに紹介することはブログの信頼性を上げるために必須のテクニックですが、WordPress標準のツールで表を作るにはかなりの時間と労力がかかります。

最も簡単に表を挿入する方法として、Excelで作った表をコピーペーストする方法がありますが、表の中にセルの結合などがある場合レイアウトが崩れて思ったように表示されないことがあります。

今回の記事では、簡単に見やすい表をつくることができるWordPressプラグイン「TablePress」を徹底解説します!

1. TablePressのメリット

TablePressで作る表は標準でレスポンシブルに対応しています。スマホで見てもレイアウトが崩れず表示されますし、文字数が多い場合は自動でスクロールバーが表示され、スクロールできるようにもなります!

ここがポイント!

TablePressは表と本文とを別で管理するので、統計など定期的に内容が変わるような表の場合でもデータの更新やメンテナンスがとても簡単です。

TablePressでは、ユーザーが表の内容を自由に検索したり並べ替えしたりできるので、まるで商用サイトのような性能比較やランキングを作ることも可能です。

下記はTablePressを使うメリットをまとめたものです。

  • 標準でレスポンシブルに対応している
  • WordPress標準エディタよりも簡単に表が作れる
  • 本文とは別に表を管理するので、表の更新が簡単
  • 表ごとにCSSを設定できるので、見栄えの良い表を作れる
  • データ量の大きな表の挿入も簡単
  • ユーザーが表の並び替えや抽出を操作できる

 

2. TablePressの導入方法

TablePressはWordPressの公式プラグインなので、お使いのWordPress管理画面左側から簡単に導入できます。

 

2-1. TablePressのインストール方法

WordPress管理画面プラグインページの右側にある検索枠に「 TablePress 」とキーワードを入力すると1番目にヒットするので「今すぐインストールボタン」をクリックします。

インストールが終了したら、プラグインを「有効化」します。

インストール済みプラグイン一覧に「 TablePress 」が追加されたことを確認したらイストール完了です。

WordPress管理画面左側メニューに「TablePress」というメニューが表示されますので、すぐに使い始められます。

 

3. メンテナンスが簡単!TablePressの使い方

ここがポイント!

通常、ブログに表を挿入する場合、本文に直接HTMLで記述するか、エディタの機能を使いますが、TablePressは本文とは別に表を作っておき、本文にはショートコードを使って反映させます。

新しく表を作るには、WordPress管理画面の左側メニュー 「TablePress」をクリックし、「新しいテーブルを追加(もしくは新規追加)」を選択します。

 

表のタイトル、行数、列数を指定してテーブルを追加します。

説明文は省略可能ですが、後からの管理が楽になるので簡単に記述しておくと良いでしょう。

 

「テーブルを追加」をクリックすると表の編集画面に画面が変わるので、表の内容を記述して「変更を保存ボタン」をクリック、右上のショートコードを本文に貼り付ければ表の完成です。

 

3-1. TablePressのセルの結合方法

セルの結合を行うには、TabelPressの表編集画面の下段にある「テーブル操作」の「セルの結合」で行います。

表の縦方向に結合を行いたい場合は、結合したいセルの下側セルを選択して「同じ列内(rowspan)」をクリックします。

 

表の横方向に結合を行いたい場合は、結合したいセルの右側セルを選択して「同じ行内(colspan)」をクリックします。

「同じ列内(rowspan)」と「同じ行内(colspan)」を組み合わせれば、広い範囲のセルを結合することも可能です。

 

3-2. 表の操作が簡単

テーブルの操作ではセルの結合の他にもさまざまな操作ができます。

3-2-1. 行や列の表示・非表示

データを残したまま表についているチェックボックスで指定した列や行を非表示にできます。

非表示にしている列や行は赤色に反転するので、同じ場所を選択して表示に切り替えることも可能です。

3-2-2. 行や列のコピー・挿入・削除

表のチェックボックスで位置を指定して行や列のコピー・挿入・削除ができます。

3-2-3. 表の並び替え

行番号や列記号にマウスカーソルを合わせてドラッグすることで、並び替えができます。

3-2-4. 行や列を新しく追加

行や列を新しく追加させることが可能で、テキストボックスに追加したい列数や行数を指定すれば一気に複数追加できます。

 

3-3. 表を見やすくするオプションが豊富

TablePressではテーブルのオプションという項目で、チェックボックスを指定するだけで表を見やすくできます。

  • 見出し行やフッター行が指定できる
  • 色をつけて行を見やすくする
  • テーブル名と説明文を表示できる

 

4. 表ごとに指定できる簡単なCSSでもっとわかりやすい表を作る

TablePressでは表ごとにCSSが使えるので、フォントや、セル内での文字揃え、罫線など様々な装飾が可能です。

 

4-1. 表ごとのカスタムCSSを作るには

表ごとのカスタムCSSは TablePress>プラグインのオプション>カスタムCSS のテキストボックス内に記述します。

4-1-1. 表にCSSクラスを設定する方法

TablePressでは表に反映させたいCSSクラスを指定できるので、いくつかサンプルを作っておけば状況に合わせて使い分けができます。

 

一覧から反映させたい表を選んで、テーブルのオプション>追加のクラスでクラス名を入力すれば完了です。

 

4-1-2. 表IDごとにCSSを設定する方法

ここがポイント!

CSSクラス名を下記のようにすればテーブルオプションでクラス名を入力しなくても、CSSを指定できます。

記述例).tablepress-id-表ID番号 下記は表ID3番を指定しています。

 

4-2. コピペで簡単表のCSSサンプル

下記にTablePressの表で使用する簡単なサンプルを記述しておきますので、コピペで使用するなど自由にお使いください。

 

5. 比較サイトやランキングサイトにも応用可能。大きなデータの表示方法

TablePlassで作られた表は、DataTablesを使用にチェックを入れるとユーザーが表の並び替えや検索が可能になり、まるで商用サイトのような表を作ることができます。

 

5-1. DataTablesJavaScriptライブラリ機能

DataTablesJavaScriptライブラリ機能を有効にするには、下記の「DabtaTablesを使用」にチェックを入れます。

下記はDatablesJavaScriptライブラリ機能にチェックを入れた表のプレビューです。

ここに注意!

ただし、セルの結合を行った表についてはDatatablesが機能しないので気を付けましょう。

 

5-2. 表のインポート・エクスポート

表のデータも一定以上多くなると手入力では大変ですが、TablePressではデータのインポートが可能です。

インポートタブからPCに保存しているファイルを選択してインポートをクリックすれば表の一覧に反映されます。

ここに注意!

エクセルなどで作った表はそのままではTablePressにインポートできませんので、ファイル形式をCSVで保存しなおす必要があります。

 

6. まとめ

公的なデータを表で示すことは記事の信頼性を上げるためにも必須ですが、ブログに表を載せることは思いのほか面倒な作業です。

ここがポイント!

TabelPressは表を簡単に作れるだけではなく、スマホの画面でも見やすいレスポンシブルにも標準で対応していますし、ユーザーが検索や並び替えができる商用サイトのような機能までつけることが可能です。

WordPress公式プラグインなので導入がとても簡単、しかも無料です。

ブログで表を作るのにお悩みでしたら、TabelPressを使ってみるのはいかがでしょうか?

\参考になったらポチッとお願いします!/

-WordPressプラグイン
-, ,

© 2020 インターネットビジネスラボ