【WPプラグイン】超カンタンに表作成できる『TablePress』の使い方とカスタマイズ方法を解説！

2020 9/03

2020.04.07 2020.09.03

URL Copied!

どうも、ひろもん（@hiromon_com）です。

WordPressには記事に表を挿入できるプラグインがいくつかありますが、あなたは何か表作成のプラグインを使っていますか？

タグを直接打ち込み表作成することもできますが、行数や列数が多い表だと面倒くさいですし、修正やカスタマイズもプラグインなら簡単に行えるので、私は『TablePress（テーブルプレス）』というプラグインを使うことが多いです。

そこで今回は、表作成プラグインの『TablePress』の使い方やカスタマイズ方法について紹介します。

ぜひ、表作成に役立ててください。

「TablePress」をインストール

『TablePress』は無料のプラグインなので、WordPressの管理画面から簡単にインストールできます。

［プラグイン］をクリックします。

［新規追加］をクリックします。

右上の検索ボックスに「TablePress」と入力すると、該当するプラグインが表示されるので、TablePressの右上にある［今すぐインストール］をクリックし、さらに［有効化］をクリックしてます。

これでWordPress管理画面の左側メニューに「TablePress」が追加されます。

「TablePress」の使い方

WordPress管理画面の左側メニューにある［TablePress］をクリックし、表示される管理画面で［新規追加］をクリックします。

テーブルの名称：表の名前（必須）
説明：表の説明（空欄でOK）
行数と列数：任意の行数と列数

［テーブルを追加］をクリックするとテーブルの編集画面に移行します。

ここで入力するテーブルの名前と説明文はあとからでも編集可能で、行数と列数もいつでも追加と削除が行なえます。

テーブルの名前と説明は記事には表示されないので、あなたが名前を見て何のテーブルなのかがわかるように、管理しやすい名前にしてください。（設定で記事に表示させることもできます）

テーブルの編集画面では先ほど入力したテーブルの名前と説明文の編集ができます。

まだ空欄のテーブルが作成されただけでこれから編集を行いますが、作成したテーブルは右側のショートコードをコピペで記事に貼り付けるだけで記事に追加できます。

テーブルの編集画面には先ほど作成した空欄の5行5列のテーブルが作成されているので、必要事項を入力してテーブルを完成させます。

テーブルの下のある「テーブルの操作」では行と列の追加や削除、結合などが行なえます。

続いて使用していない行と列の削除方法を紹介します。
まずは行の削除からです。

削除する行にチェックを入れて［削除］をクリックすると選択した行が削除されます。

列の削除も行の削除と同じ要領です。

削除する列にチェックを入れて［削除］をクリックすると選択した列が削除されます。

テーブルの編集が終わったら編集画面の一番上か一番下にある［変更を保存］をクリックしてください。

不要な行と列が削除されたので、ショートコードを記事にコピペで貼り付けるとテーブルが挿入されます。

記事に追加したテーブルがこちらですが、デフォルト設定だとごちゃごちゃしているので設定を変更します。

ログイン状態を維持しているとテーブルの左下に［編集］と表示されているので、クリックすると記事から直接テーブルの編集画面に移動できます。

［編集］ボタンは管理者であるあなたがログインしているときにしか表示されません。読者が記事を読むときには表示されないので安心してください。

編集画面に戻ってきたら「テーブルのオプション」でチェックが入っているものをすべて外し、［変更を保存］をクリックします。

もし使用したいオプションがあればチェックを入れてもいいですが、私の場合はいつもすべてのチェックを外しています。

記事に戻りテーブルを確認すると、余計なものが無くなりシンプルになりました。

基本的な使い方は以上ですが、次はもう少し見やすくするためのカスタマイズ方法について紹介します。

「TablePress」のカスタマイズ

テーブル管理画面の上部にある［プラグインのオプション］をクリックします。

ここでカスタムCSSを入力すると、文字装飾やセンタリング、背景色などのカスタマイズが行えます。

テーブルに枠線をつける

テーブルに枠線をつけるには以下のコードをコピペしてください。

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid black;
}

枠線なし（デフォルト）の方も薄く線はありますが、非常に見にくいので枠線を付けるコードはあった方がいいです。

このコードはすべてのテーブルに適用されるので、ブログで使うすべてのテーブルに枠線が付きます。

文字をセンタリング（中央寄せ）する

文字を中央寄せするには以下のコードをコピペしてください。

/* tablepressの使い方 */
.tablepress-id-8 .row-2 .column-1,
.tablepress-id-8 .row-3 .column-1,
.tablepress-id-8 .row-4 .column-1 {
	text-align: center;
}

「id（テーブルの識別番号）」「row（行の指定）」「column（列の指定）」です。

記事に貼り付けるショートコードを見ればテーブルごとのidがわかります。
この記事に使っているテーブルのidが8なので、コードは8になっています。

「.row-2 .column-1」は2行目1列目を指します。
「.row-3 .column-1」は3行目1列目を指します。
「.row-4 .column-1」は4行目1列目を指します。

今回は3つのセルを中央寄せしたので上記のコードになっていますが、中央寄せさせたい行と列を好きなように指定して使用ください。

セルの背景色を変更する

背景色を変更する場合は以下のコードをコピペしてください。

/* tablepressの使い方 */
.tablepress-id-8 .row-2 .column-1,
.tablepress-id-8 .row-3 .column-1,
.tablepress-id-8 .row-4 .column-1 {
	background-color: #336699; /* 背景色の指定 */
}

「#336699」の部分はカラーコードなので、好きなカラーコードに変更してください。

中央寄せと同じように行と列を指定できます。

文字装飾をする

文字装飾をする場合は以下のコードをコピペしてください。

/* tablepressの使い方 */
.tablepress-id-8 .row-2 .column-1,
.tablepress-id-8 .row-3 .column-1,
.tablepress-id-8 .row-4 .column-1 {
	font-weight: bold; /* フォント太さ */
	color: #F03E51; /* フォントカラー */
}

フォントカラーの「#F03E51」の部分は好きなカラーコードに変更してください。
このコードでは文字が「太字・赤色」になります。

文字装飾も行と列を指定できます。

コードを組み合わせる

ここまでで使用頻度の高い基本的なCSSコードを紹介してきましたが、ここで紹介したコードは自由に組み合わせることができます。

/* tablepressの使い方 */
.tablepress-id-8 .row-2 .column-1,
.tablepress-id-8 .row-3 .column-1,
.tablepress-id-8 .row-4 .column-1 {
	text-align: center;
	background-color: #336699; /* 背景色の指定 */
	font-weight: bold; /* フォント太さ */
	color: #FFFFFF; /* フォントカラー */
}

たとえば「中央寄せ・背景色・太字・フォントカラー」を組み合わせた例です。