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

どうも、ひろもんです。

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（列の指定）」です。

セルの背景色を変更する

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

/* 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; /* フォントカラー */
}

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

セルの幅を変更する

ここまで紹介してきたテーブルの幅はすべて均等になっていますが、文字数が多いセルがあると自動的に幅が調整されます。

試しに1列目の文字数を増やしてみると、自動的に幅が調整されました。
これはこれで便利ですが、文字数に関係なく任意の幅に調整する方法を紹介します。

まずこちらが通常のショートコードです。
このままだと文字数に応じて自動的にセルの幅が調整されます。

任意の幅に設定するには以下のコードをショートコードに追加します。

column_widths="20%|40%|40%"

幅の指定は合計で100％になるようにします。

今回の例であれば、テーブルは3列なので100％を20％・40％・40％の三等分にしています。

幅を指定するとこのように、指定した割合に応じた幅に固定されます。

これで特定のセルの幅だけを狭くしたり広くしたり自由自在に変更できるので、必要に応じて変更してください。

「TablePress」の便利機能

「TablePress」では行と列をドラッグアンドドロップで自由に入れ替えられます。

たとえば複数の商品を比較していて、商品の順番を並び替えたいときや、比較項目を入れ替えたいときにすごく便利な機能です。

他にも画像を入れたり、リンクを入れたりもカンタンに行えます。

最後に

ここまで「TablePress」を紹介してきましたが、いかがでしたか？

カスタマイズもコピペすればすぐに使えるものばかりなのでカンタンですし、たった1行のショートコードをコピペで貼り付けるだけで、記事にテーブルが挿入されるのですごく便利なプラグインです。

ひろもん

何かを比較するときに表があるのとないのとでは、わかりやすさに雲泥の差でるので、ぜひ表を活用してみてください。

fa-lightbulb-o

ぜひ応援クリックお願い致します