使い回しができる「TablePress」の使い方とカスタム方法

TablePressの使い方アイキャッチ画像WordPress

毎回表を作るのが面倒くさいわ。何かいいプラグインはないかしら?

情報を整理するのに便利なレイアウトの一つに表(テーブル)があります。

同じ表(テーブル)を何度も作るのは面倒くさいですよね。

今回は、一度作ったら何度も使えて、ページごとにアレンジができるテーブルプラグインを紹介します。

この記事の内容

テーブルプラグインのTablePressについてまとめました。

表の作り方からアレンジ、レスポンシブ化する方法まで、サンプル表と画像を使いながら解説します。

これさえ読めばTablePressは8割方マスターします!

こんな人にきっと役立つ記事になると思いますので、よかったら最後までお付き合いくださいね。

  • 何度も同じ表(テーブル)を作るのが面倒な人
  • CSSが苦手でもアレンジしたい人
  • TablePressの使い方が知りたい人

TablePressの公式ページは英語です。私はブラウザの翻訳を使って、表を設定を行いました。

「ちょっと難しいなぁ」と思うところもありますが、この記事では必要なところだけ解説したいと思います。

TablePressについて

公式ページのTablePressの画像
▲TablePressの公式ページより

投稿ページや固定ページの本文中でもブロックエディタでテーブルを指定すると、表を作ることができます。

ただ、この方法だと使い回しができません。TablePressなら面倒な表(テーブル)作りから解放されるプラグインです。

作られた表(テーブル)はショートコードで管理されるので、投稿ページや固定ページ、ウィジェットに表を載せることができます。

TablePressは、あなたが簡単に美しいテーブルを作成し、管理することができます。シンプルなショートコードを使用して、テーブルを投稿、ページ、またはテキストウィジェットに埋め込むことができます。テーブルデータは、スプレッドシートのようなインタフェースで編集できるため、コーディングは不要です。テーブルには、評価される数式を含め、任意の種類のデータを含めることができます。追加の JavaScript ライブラリは、サイト訪問者のための並べ替え、ページネーション、フィルター処理などの機能を追加します。テーブルは、Excel、CSV、HTML、JSON ファイルとの間でインポートおよびエクスポートできます。‎

「TablePressプラグイン詳細」より翻訳しました

TablePressができること

TablePressのデモテーブル画像
▲TablePressならシンプルで使い勝手のいい表が作成できるよ

TablePressは表の使い回しができるだけのプラグインではありません。

エクセルで作った表を取り込めば、一度作ったデータの使い回しが簡単にできる優れたプラグインです。

TablePressができることをまとめてみます。

TablePressができること
  • 表の使い回しができる
  • 表を一元管理できる
  • 管理者のみ、プレビュー画面から表を編集できる
  • 表のインポート・エクスポートができる
  • 読者自身で表の並び替えができる
  • ショートコードで直接アレンジを加えることができる
こばち
こばち

ショートコードで直接セルの幅を指定できるのが便利です

TablePressをオススメする理由

TablePressプラグインの新規追加画面
▲プラグインの新規追加画面:星5つです!

私がTablePressを3年ほど使っていて、みなさんにオススメする理由はシンプルで使いやすいプラグインだからです。

また、TablePressの公式ページは英語ですが、分かりやすいので助かっています。

私の「ここがおすすめポイントだなぁ」ってところをリストアップします。

TablePressをオススメする理由
  • 投稿ページなど編集画面がショートコードなのでスッキリする
  • 修正や変更作業が1つのデータで終わるので楽ちん
  • 80万以上のサイトでインストールされており、98%以上が最高評価
  • クリックと文字入力だけで、表がつくれる
  • セルの結合ができるので、自由なレイアウトができる

80万以上のサイトでインストールされているので、困った時は検索すれば何かしらヒットします。

こちらのページが私も知らなかったことがまとめられているので、オススメですよ。「TablePressのテーブル幅を変更する&表の背景色や文字色を変更する方法」

TablePressの残念ポイント

▲TablePressの残念ポイントは見た目

TablePressには残念ポイントがあります。あとでまた解説しますが、見た目です。

水平スクロールを表示させるためには、1行目を見出しにしなくてはなりません。

しかも、水平スクロールは列が多い場合に表示されます。

神社沿革など年表など説明書きが必要な表の場合、1つのセルが長くなります。

1つのセルが長くて横長の表には水平スクロールは表示されません。

行の最初や最後を見出しにすると幅が自動調整されます。デフォルトのままだと「width:100%」ですが、チェックが入るとサイズがちいさくなります。

TablePressのやさしい使い方

TablePressのやさしい使い方アイキャッチ画像

ここからはTablePressの使い方を解説してきます。

TablePressをインストールするとダッシュボードのメニューに追加されます。

TablePressメニューの中から「新しいテーブルを追加」をクリックして、新規画面を開きます。

ダッシュボードのTablePressメニュー以外にも編集画面にタブがるので、マウスで左に動かすより、上に動かす方が手首がつらくないので、どちらからでもたどり着けるのは便利です。

TablePress編集画面のメニュータブ
▲TablePress編集画面にメニュータブがあるので、わりと便利

ちょっとおさらい:テーブルの名称

テーブルの作り方の前に、テーブルの基本語句です。

TablePressのデモテーブルにTablePressに必要な基本語句を書き示しました。

テーブルに必要な概念図
▲TablePressのデモテーブルの見出しと行、列
これだけ覚えればOK
  • 見出し・・・セルや表の名前
  • 行(row)・・・横の並び
  • 列(column)・・・縦の並び
  • セル・・・1マスのこと
こばち
こばち

行と列はややこしいですよね。横が行、縦が列です。

表(テーブル)の作り方

さて、テーブルを作成していきましょう。

新しいテーブルを追加する

TablePressの新規作成画面
▲TablePressの新規作成画面:まずは枠組みだけ設定します

新しいテーブルを追加作成するために、テーブルの名前や行数、列数を設定します。

入力が終わったら、「テーブルを追加」ボタンをクリックします。

あとで、行や列などは修正できるので、まずは適当に入力しても大丈夫ですよ。

テーブルにデータを入力する

実際に作成した表を例にします。2020年度の厄年早見表です。

8行6列の表で、1行目はセル3つ分を1つのセルに結合して、女性・男性に分けています。

TablePressで編集中の厄年早見表
▲厄年早見表はTablePressで作りました。2020年のものです。

縦の数字は行、横のアルファベットは列を表しています。

1行目のBC,DEに「#coldpsn#」と書かれており、これがABC、DEFが結合されていることを表しています。

このテーブルには「#rowspan#」はありませんが、縦のセルを結合することを「rowspan」と言います。

▲クリックで挿入やcolspanができるから、データ入力に集中できるね!

セルにデータを入力している途中で、行を増やしたいとき、画像を挿入したいときは「テーブルの操作」を使います。

操作方法は3種類です。分かりやすいように色分けしました。

テーブルの操作は3つ
▲操作方法で3つに分かれるよ

①紫色・・・ボタンをクリックしてから対象のセルをクリックします。

②青色・・・縦の数字や横のアルファベットにチェックを入れて、ボタンをクリックする

③緑色・・・ボタンをクリックすると最終行、最終列に行や列が追加される

①紫色はボタンをクリックするとメッセージが表れるのでメッセージを読めばいいのですが、「挿入」と「追加」はちょっと間違えやすいです。

「挿入」は行と行、列と列の間に行または列を加えることです。

こばち
こばち

挿入も追加の一種だから、操作をよく間違えます。

行の数字にチェックして、「1行を追加する」を選んじゃうんですよね・・・

テーブルのオプションを選ぶ

テーブルのオプションの画像
▲HTMLだったら面倒な設定もクリックで簡単に出来るよ。

テーブルのオプションです。画像は3つチェックを入れた状態です。

  1. テーブルの最初の行をテーブル見出しにする
  2. 連続する行の背景を別々の色にする(デフォルト)
  3. マウスカーソルを行に合わせている間、行の背景色を変更してハイライト表示する

プレビュー画像はしたのようになります。

テーブルプレビュー画像
▲オプションを選択するとこうなる。お好みの設定でよいと思います
  1. テーブルの最初の行を見出しに設定すると、背景が水色になります
  2. 行の背景色が白とグレーの交互になります
  3. マウスカーソルを合わせている間、やや濃いグレー色になります

他には、初めに設定したテーブル名と説明を表示させること、テーブルフッターを表示させることができます。

追加のCSSクラスを用いれば、TablePressの「プラグインのオプション」で細かくテーブルのデザインを調節・変更することができます。

DataTables JavaScriptライブラリの機能を有効化する

JavaScriptライブラリの機能の画像
▲JavaScriptライブラリの機能の追加設定:

「DataTables JavaScriptライブラリの機能」を有効化するか設定します。

ただ、「テーブルオプション」の「テーブルの最初の行をテーブル見出しにする」にチェックが入っていないと、有効化できません。

読者がデータを並び替えできて便利ですが、あまり神社のホームページには必要のない機能の用に感じます。表の内容や大きさに合わせてチェックをいれたらいいと思いますよ。

「水平スクロール」は列が多く横に長い表のときはチェックを入れると、水平スクロールが表示されます。

ただ、あまり見た目がよくありません。

セルの幅が自動調節された上で水平スクロールが表示されます。

横25列の横長のサンプル表
▲横25列の横長のサンプル表です。文字が縦に調整されています

「テスト」や他のセルの文字が縦文字に調整されています。

こばち
こばち

横長の表や文字が多い表は崩れます。TablePressの残念ポイントですね。

表をアレンジしよう

表のアレンジはショートコードとCSSで行う事が出来ます。

次は表のアレンジを解説しますね。

ショートコードでセル幅を調節しよう

表のセル幅(カラム)を調整したいときは、ショートコードに直接記入する方法が一番簡単です。

パーセント(%)とピクセル(px)の2種類が使えます。

ただし、パーセント(%)の場合は合計が100パーセント(%)になるように指定します。

書き方は、左のセル幅からしていします。

[table “span” not found /]

例えば、上で使ったサンプル表を次のように指定します。

[table id=15 column_widths="100px|150px|80px|40px|100px"/]

25列ですが、左から5列分だけ指定しました。さて、6列目からはどうなるでしょうか?

▲サンプル表のセル幅を調整する

すると、こうなりました!

左から指定通り、100ピクセル、150ピクセル、80ピクセル、100ピクセルとなっていますね。

25列の表なので6列目からは指定してません。6列目からは自動調整されました。

こばち
こばち

表の横幅の指定はCSSで行いますよ

CSSでアレンジする方法

ここからはCSSでアレンジする方法です。7つ紹介します。

CSSを使った7種類のアレンジ方法
  • 表の横幅を指定する
  • 特定の列幅を指定する
  • 表の枠を消す
  • 見出しの色を変える
  • 行の背景色を変える
  • カーソルを合わせている行のハイライト色を変える
  • 特定のセルの文字の大きさ、文字色、背景色を変える

編集する場所は「TablePress/プラグインのオプション/カスタムCSS」です。

プラグインのオプション/カスタムCSSの画面
▲プラグインのオプション/カスタムCSSに記入します

英語が苦手で、でも、何が書いてあるか気になるわ

日本語と英語が編集画面で混じっている場合があります。

そんな時は文章を選択して、右クリックをします。

英文を選択した画像
▲読みたい英文を選択して(クリックしてマウスをずらす)右クリックすると

メニューが表示されるので、「選択範囲を日本語に翻訳」をクリックします。ちなみに私のブラウザはEdgeです。

日本語翻訳後の画像
▲英文を選択して日本語に翻訳したよ

すると、日本語になりました!

こばち
こばち

これで、英語は恐くない(はず)

*「.tablepress-id-数字」と例にしていますが、表全てに反映させたい場合は「.tabalepress」でよくて「-id-数字」はいりません。

表の横幅を指定する

表の横幅(width)をパーセント(%)、またはピクセル(px)で指定します。

サンプル表の幅を50パーセントに指定します。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 {
width: 50%;
}

スマホの方は見て分かると思いますが、スマホで見ると表が崩れています。

表によってはサイズを小さくしない方がいいと思いますよ。

特定の列幅を指定する

特定の列幅をパーセント(%)またはピクセル(px)で指定します。

1・2列目は25パーセント、3列目を50パーセントに指定しました。パーセントの場合は合計100パーセントになるように指定します。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 .column-1 , .column-2 {
width:25%;
}
.tablepress-id-数字 .column-3 {
width:50%;
}

わかりやすいように、表の枠はすべて表示させています。

表の枠を消す

表の枠線を消します。TablePressは横線だけ設定されている状態です。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字,
.tablepress-id-数字 tr,
.tablepress-id-数字 tbody td,
.tablepress-id-数字 thead th,
.tablepress-id-数字 tfoot th {
	border: none !important;
}

テーブルオプションの「連続する行の背景を別々の色にする(デフォルト)」のチェックを外して、背景色をなしにしています。

また、「!important」をつけてCSSの指示を強力にしました。

逆に、枠を表示させたいときは「border」以下を次のように指定します。線のスタイルは好きなように設定できます。

border:1px solid #aaaaaa;

ただし、「Cocoon」ではチェックを外しても背景色がつきますので、さらに指定が必要です。

.tablepress-id-数字 td {
	background-color: #fff !important;
}

行の背景色を変える

さきほど、Cocoonで背景色を白にしました。これを応用して背景色を変えてみましょう。

特定の行の色を変える

特定の行の背景色を変えます。千葉県の3行目の背景色を変えてみます。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753

/* テーブルオプションで背景色のチェックを外しても着く場合は、先に全ての行の背景色を白にする */
.tablepress-id-数字 td {
	background-color: #fff !important;
}

.tablepress-id-数字 .row-3 td{
	background-color: #dcf7e0;
}

変えたい行数を「.row-数字」で指定します。tdはセルを表しています。

「3行目のセルの背景を緑色(#dcf7e0)にしてね」という意味になります。

こばち
こばち

tdがないと反映されないよ。trでも反映されないよ。

交互の行の背景色を変える

今度は交互の行の背景色を好きな色に変えますよ。

1行目と3行目(奇数行)を緑色(#dcf7eo)に変更します。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 .odd td {
  background-color: #dcf7e0;
}

奇数は「.odd」、偶数は「.even」で指定します。

見出しの色を変える

表の見出しの色を水色から好きな色に変更します。

前提条件として、テーブルオプションの「テーブルの最初の行をテーブル見出しにする」にチェックを入れます。

 県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 thead th {
  background-color: #f5c2db;
}

テーブルフッターを設定した場合は

.tablepress-id-数字 tfoot th {
  background-color: #f5c2db;
}

カーソルを合わせている行のハイライト色を変える

テーブルオプションでチェックを入れると、マウスカーソルを合わせている間、やや濃いグレー色になります。

やや濃いグレー色を好きな色に変えます。

これもチェックを入れていないと反映されません。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 .row-hover tr:hover td {
  background-color: #f5c2db;
}

特定のセルの文字の大きさ、文字色、背景色を変える

ここまできたら、アレンジする力がついてきていますよ!あと少しです。

次は、さいたま市の人口を目立つようにしました。また、3列目は右寄せにして数字を読みやすくしました。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753
.tablepress-id-数字 .column-3 {
	text-align: right;
}

.tablepress-id-数字 .row-4 .column-3 {
	background-color: #f5c2db;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ff0000;
}

TablePressの表を中央・左・右に寄せる方法

カラムに入れたりグループ化してコードを使わない方法を試したのですが、できませんでした。ごめんなさい。

県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753

コードエディターに書く方法がありますが、直接ショートコードに書き込む方が早い感じがします。

ショートコードに直接タグを書いた画像
▲ショートコードのボックスに直接タグを書こう

中央揃えと左・右寄せをまとめると以下のようになります。

<!--  中央揃え・その1 -->
<div align="center">[TablePressのショートコード]</div>

<!--  中央揃え・その2 -->
<center>[TablePressのショートコード]</center>

<!--  左寄せ -->
<div align="left">[TablePressのショートコード]</div>



<!--  右寄せ -->
<div align="right">[TablePressのショートコード]</div>

TablePressをレスポンシブ化する方法

残念ながら、TablePressでレスポンシブ化はおすすめしません。

TablePressはあくまで使い回しをしたい図があるときにオススメします。

1度や2度くらいの簡単な表ならば、テーマが持っている表やブロックエディタの表を使った方が便利です。

その点は「Cocoon」はチェック一つで水平スクロール対応になるので素晴らしいと思います。

拡張プラグインを公式サイトからダウンロードする

公式サイトの「拡張 機能(EXTENTIONS)」の「Responsive Tables」からダウンロードします。

無料ではありますが、寄付のお願いが書かれています。

ご判断はお任せします。

スクロールを表示させる

直接ショートコードにタグを書くと便利です。

古典現代文数学A数学B化学生物世界史地理英語合計順位
Aさん98点80点80点78点85点90点70点70点77点728点2位
Bさん78点80点85点82点90点92点68点74点70点719点3位
Cさん100点85点98点97点95点97点100点100点92点864点1位
平均92.0点81.6点87.6点85.6点90.0点93点79.3点81.3点79.6点

自動調整されますが、この方法が簡単です。

<div style="overflow : auto;">
[table id=数字 /]
</div>

スマホやブラウザの幅を狭めると水平スクロールが自動で表示されるようになっています。

以上、TablePressについて使い方とカスタムの方法をまとめました。お役にたったら幸いです。

最後までお付き合い頂き、ありがとうございました。お疲れ様でした。

タイトルとURLをコピーしました