表の使い回しができる「TablePress」の使い方とカスタマイズ

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

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

この記事では「TablePress」の使い方、文字色を変更したり背景色や枠線を消す方法などお伝えします。

「TablePress」は表の使い回しやショーコード内で編集ができるので、表が作りが面倒な人時短したい人にピッタリなプラグインです。

TablePressの公式ページ(https://tablepress.org/)は英語です。

公式ページは「ちょっと難しいなぁ」と思う人に、私が「これは便利!」と思ったところを解説したいと思います。

TablePressについて

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

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

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

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

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

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

TablePressができること6つ

TablePressのデモテーブル画像
▲シンプルな表は読者の理解を助けます。シンプルは美しい!

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

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

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

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

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

TablePressをオススメする理由

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

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

また、TablePressの公式ページ(https://tablepress.org/)は英語ですが、分かりやすいので助かっています。

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

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

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

私も困った時はまず検索して、いくつかサイトを見てますよ。

TablePressの残念ポイント:水平スクロール

▲TablePressの癖を知るために作った列の多いテスト表

上の画像は癖を知るために作ったテスト表です。縦3行、横18列以上の横に長い表です。1行目は「テスト」の文字を並べ、行には1文字から4文字のひらがなを並べました。

水平スクロールは自動で調整されるため、何列目から水平スクロールになるかわかりません。列が多い場合に表示されます。

自動調整は列の幅、行の長さも変更されます。上のテスト表のように「テスト」の文字が縦に配置されました。

水平スクロールを適用しなければ幅は「width:100%」ですが、適用されればセルの横幅が自動で調整され狭くなります。セル内の文章は指定ができないため思わぬところで自動改行され、見た目が揃わない原因になります。

また、住所や年表など1つのセルが長い場合の横長の表には水平スクロールは表示されません。

氏名郵便番号住所年齢
山田太郎123-0000あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん42
佐藤花子123-4567いろはにほへとちりぬるをわかそたれかつねならんういのおくやまけふこえてあさきゆめみしえひもせす33

TablePressの残念なポイント:レスポンシブ化されていない

残念ながら表はレスポンシブ化されていません。

ウェブサイト上のテーブルの技術的な仕組みにより、常に自動的に画面上の利用可能なスペースに調整することはできません。その理由は、コンテンツに一定の最小領域が必要であり、それがテーブルの最小幅を定義するためです。テーブルの最小幅が使用可能なコンテンツ領域の幅よりも大きい場合、テーブルは収まりません。残念ながら、これは、次の例のように、テーブルの一部が右側で切断される可能性がある携帯電話やタブレットのような小さな画面で醜い動作につながる可能性があります。

「TablePress」拡張機能ページを翻訳しました

対応策は下に書きましたので参考にしてくださいね。

TablePressの基本的な使い方

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

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

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

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

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

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

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

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

TablePressのデモテーブルにTablePressに必要な基本語句です。

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

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

表(テーブル)の作り方

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

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

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

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

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

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

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

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

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

2022年の厄年表の作成画面
▲厄年早見表はTablePressで作りました。2022年のものです。

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

セル同士を結合させる方法

セル同士を結合させたいときの指定です。横に結合したいときは「#colspan#」を使い、縦に結合したいときは「#rowspan#」を使います。

colspanやrowspanはHTMLでもセルの結合に使います。HTMLの知識がWordPressのプラグインでも役立つのでHTMLを勉強して損はないですよ。HTMLの基本的なタグをまとめた記事がありますのでよかったら読んでみてくださいね。

1行目のBC,DEに「#colspan#」と書かいてあります。「#colspan#」は左となりのセルと結合を表しています。BはAと結合し、CはBと結合しています。つまり、ABCは1つのセルに結合されています。

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

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

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

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

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

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

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

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

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

「追加」は最終行(または列)に指定の行数を加えることです。

みきみかん
みきみかん

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

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

「テーブルのオプション」について

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

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

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

チェックした1~3は次のようになりました。

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

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

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

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

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

「DataTables JavaScriptライブラリの機能」を有効化すると、読者が表を自分で見やすいようにアレンジすることができるようになります。

また、横に長い表の場合水平スクロールを使用することができるようになります。

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

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

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

セルの横幅が自動調節されるので、あまり見た目がよくありません。

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

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

みきみかん
みきみかん

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

TablePressの表を中央・左・右に揃える方法

テーブルを呼び出す際のショートコードに<div>タグで囲みます。<div>タグはブロックを央揃えや左右に寄せるのに使える便利なタグです。

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

セル内の中央揃えは、下の「CSSでアレンジする方法」で解説しますね。

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

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

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

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

カラムに入れたりグループ化してショートコードを使わない方法を試したのですが、できないようです。

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

ショートコードに直接タグを書いた画像
▲ショートコードのボックスに直接タグを書こう
県庁所在地人口
東京都新宿区345,815
千葉県千葉市981,675
埼玉さいたま市1,318,753

WordPressでも困った時にコードエディターで使えるので、HTMLの知識は知っておいて損はしません。沢山あるタグの中からよく使うタグをまとめた記事です。よかったらどうぞ。

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

TablePressは表の最小幅が設定されているため、レスポンシブ化されていません。

そのため、拡張プラグインをダウンロードすればレスポンシブ化が可能になります。

拡張機能をダウンロードするのに抵抗がある人はスクロールをつける方法があります。

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

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

12ドル以上の寄付のお願いが書かれています。ご判断はお任せします。

スクロールを表示させる

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

古典現代文数学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>

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

DataTables JavaScriptライブラリの機能 の中にも水平スクロールがありますが、こちらは最初の行を見出しにする必要があります。

表をカスタマイズしよう

表の文字や背景色などの編集はショートコードと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でアレンジする方法です。8つ紹介します。

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

編集する場所は「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;
}

セル内の文字を揃える

次は、セル内の文字揃えです。上のCSSに既に出てきてますが・・・

県庁所在地は中央揃え、人口は右寄せに設定しました。わかりやすいように枠を表示しています。

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

[text-align]セレクタで指示をします。中央揃えなら「center」、右寄せなら「right」です。デフォルトは左寄せになっていますよ。

.tablepress-id-数字 .column-変更させたい列数 {
	text-align: center;
}

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

CSSについてまとめた記事があります。HTMLの知識と同様に知っていて損はしないと思います。余裕がある方はどうぞ。

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