TablePressは、ブログ初心者でも簡単に表を作成できるWordPressプラグイン。標準機能でも表は作成できますが、デザイン性やカスタマイズ性に欠けるため、TablePressを導入することで格段に表現の幅が広がります。
この記事では、TablePressの基本的な使い方から、便利なカスタマイズ方法まで、画像を交えて解説していきます。
TablePressのインストール方法
- WordPress管理画面の「プラグイン」→「新規追加」をクリック
- 右上の検索欄に「TablePress」と入力
- TablePressが表示されたら「今すぐインストール」→「有効化」
テーブルを新規作成する
- サイドメニューに追加された「TablePress」をクリック
- 「新しいテーブルを追加」を選択
- テーブル名・行数・列数を入力（後から変更可能）
- 「テーブルを追加」をクリック
作成が完了すると「テーブルID」と「ショートコード」が発行されます。 このショートコード（例：[table id=1 /]）を記事中に記載することで、表が表示されます。
テーブルにデータを入力する
- 「テーブルの内容」セクションでセルに直接データを入力
- 「テーブルの操作」で行・列の追加やセルの結合が可能
行の結合例：
- セル結合ツールの「同じ行内（colspan）」を選択
- 「同じ行の複数のセルを結合するには～」と表示されるが、「OK」を選択
- 結合したいセルを選ぶと自動で
#colspan#が入力される
これで実際の表を見てみると…
セルが結合されてめでたくアップル（？）となりました。
表の見た目を整えるオプション
テーブルの表示オプションでは以下の機能が利用できます：
- 「テーブルの見出し行」にチェック → 1行目を太字に
- 「行の色を交互にする」「カーソルのある行をハイライト」 → 任意でオン
- 「Datatables Javascriptライブラリの機能」 → 並べ替え・検索機能
最初の行を見出しにするをチェックすると、上画像のように一行目が見出しとなって太字に。後述するカスタマイズで、背景色を指定することもできます。
Datatables Javascriptライブラリの機能を使用すると、読者が表の並べ替えなどを操作できるようになります。
一番上の「このテーブル以下で～」のチェックをはずすと、すべての機能が無効となります。
設定するかどうかはお好みで。
ショートコードを使って記事に表を挿入
投稿画面で、作成したショートコード（例：[table id=1 /]）を入力すると、記事内に表が表示されます。
よく使うカスタマイズ例（カスタムCSS）
Tablepressでは、「プラグインのオプション」で様々なカスタマイズが行えます。
やり方は「カスタムCSS」の枠内にコードを記入するだけ。
表全体に枠線と中央寄せを設定
まずやっておくと便利なのが、表に枠線をつけて文字を中央寄せにしておくこと。
以下のコードで、すべての表に適用されるようになります。
/* すべてのセルに枠線を付加・太字・上下中央寄せ・中央揃え */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid black !important;
vertical-align: middle;
text-align: center;
}/* 見出しの背景色 */
.tablepress thead th {
background-color: #EEFFFF;
}
※「/* */」で囲んだテキストはメモ代わりとなり、装飾には反映されません。
各CSSプロパティの意味
border: 枠線の太さと色vertical-align: 上下の位置（middleで中央）text-align: 左右の位置（centerで中央）background-color: 背景色
カラーバリエーションはこちらのカラーコードサイトなどを参考に。
特定のセルを装飾する
次に、特定の表・セルだけ文字や背景色の装飾をしたい場合、以下のように記入します。
#tablepress-○ .row-△ .column▲{
}
○にはテーブルのID、△・▲は列番号・行番号を記入します。（rowとcloumnは順番通りにしないと反映されない）
#tablepress-258 .row-3 .column-5 {
color: red; /*文字色を赤に*/
background-color: lime;/ *背景色をライムに*/
text-align: left;/ *文字を左寄せ*/
font-weight: bold;/ *文字を太字に*/
}
複数のセルに同じ装飾を適用する場合：
#tablepress-258 .row-3 .column-5,
#tablepress-258 .row-4 .column-3 {
color: red; /*文字色を赤に*/
background-color: lime; /*背景色をライムに*/
text-align: left; /*文字を左寄せ*/
font-weight: bold; /*文字を太字に*/
}※この場合、1行目の最後に「カンマ（，）」が必要になります。装飾するセルが増えた場合も、最終行以外にカンマを付けるのを忘れずに！
こんな感じで装飾できるので、自分好み（読者に見やすいよう）に色々やってみましょう。
列幅の調整
作成した表の幅は自動で調整されますが、自分で調整することもできます。
幅を調整するには、ショートコードの後ろに「column widths=””/」と記入。
[table id=○ column widtsh="30%|25%|45%"/]
これで左・中・右の幅をそれぞれの割合で調整できます。
指定しなかった列がある場合、自動で調整されるようになっています。ただ、パソコンとスマホでは見え方が異なるので、うまく調整するのは難しいんですわ…
まぁ少しずつ調整してはプレビューで確認していくしかないですね。
まとめ
Tablepressを使いこなせれば読者にとって見やすく便利なサイトになり、Googleからも高評価を得られる…かもしれないし、得られないかもしれません。
たまにちゃんと記入しているのに反映されなかったり手強いことも多いですが、思い通りにできたときは楽しいですね。
コメント