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

どうも、ひろもん(@hiromon_com)です。

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

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

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

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

もくじ

「TablePress」をインストール

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

ワードプレスプラグインのインストール手順1

[プラグイン]をクリックします。

ワードプレスプラグインのインストール手順2

[新規追加]をクリックします。

ワードプレスプラグイン「TablePress」のインストール手順1

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

ワードプレスプラグイン「TablePress」のインストール手順2

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

「TablePress」の使い方

「TablePress」の使い方1

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

「TablePress」の使い方2

テーブルの名称:表の名前(必須)
説明:表の説明(空欄でOK)
行数と列数:任意の行数と列数

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

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

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

「TablePress」の使い方3

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

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

「TablePress」の使い方4

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

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

「TablePress」の使い方5

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

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

「TablePress」の使い方6

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

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

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

「TablePress」の使い方7

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

「TablePress」の使い方8

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

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

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

「TablePress」の使い方9

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

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

「TablePress」の使い方10

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

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

「TablePress」のカスタマイズ

「TablePress」のカスタマイズ手順1

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

「TablePress」のカスタマイズ手順2

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

テーブルに枠線をつける

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

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid black;
}
「TablePress」のカスタマイズ手順3

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

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

文字をセンタリング(中央寄せ)する

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

/* 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」のカスタマイズ手順4

記事に貼り付けるショートコードを見ればテーブルごとの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」のカスタマイズ手順5

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

文字装飾をする

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

/* 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」の部分は好きなカラーコードに変更してください。
このコードでは文字が「太字・赤色」になります。

「TablePress」のカスタマイズ手順6

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

コードを組み合わせる

ここまでで使用頻度の高い基本的な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; /* フォントカラー */
}

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

「TablePress」のカスタマイズ手順7

セルの幅を変更する

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

「TablePress」のカスタマイズ手順8

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

「TablePress」のカスタマイズ手順9

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

「TablePress」のカスタマイズ手順10

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

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

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

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

「TablePress」のカスタマイズ手順11

幅を指定すると指定した割合に応じた幅に固定されます。

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

「TablePress」の便利機能

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

「TablePress」の便利機能

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

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

まとめ

ここまで『TablePress』を紹介してきましたが、いかがでしたか?

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

ひろもんのアイコン画像ひろもん

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

もくじ
閉じる