> アフィリエイトに役立つおすすめツール <

「TablePress」の使い方を徹底解説!テーブル(表)をカンタン作成できる!

  • URLをコピーしました!

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

記事にテーブル(表)を使うことがあると思いますが、クラシックエディターでテーブルを作成しようとすると、大量のHTMLタグで管理しなければならず非常に手間がかかるため、プラグインを使うのがオススメです。

そこで今回は、私がよく使用していたテーブル作成プラグイン「TablePress」について徹底解説します。

この記事でわかること
  • 「TablePress」の使い方
  • 「TablePress」のカスタマイズ方法
タップできる目次

「TablePress」の使い方

「TablePress」の使い方

インストール方法

「TablePress」は無料プラグインのため、WordPressの管理画面からインストールできます。

STEP
プラグインの[新規追加]をクリック
プラグインのインストール手順1

プラグインにカーソルを合わせるとサブメニューが表示されるので、[新規追加]をクリックします。

STEP
検索ボックスに「TablePress」と入力
プラグインのインストール手順2

右上の検索ボックスに「TablePress」と入力すると、該当するプラグインが表示されます。

STEP
[今すぐインストール]をクリック
プラグインのインストール手順3

[今すぐインストール]をクリックするとインストールが開始されます。

STEP
[有効化]をクリック
プラグインのインストール手順4

インストール完了後、[有効化]をクリックして完了です。

テーブル作成方法

続いてテーブルの作成方法を解説します。

STEP
TablePressの[新しいテーブルを追加]をクリック
「TablePress」のテーブル作成方法1

TablePressにカーソルを合わせるとサブメニューが表示されるので、[新しいテーブルを追加]をクリックします。

STEP
必要事項を入力し[テーブルを追加]をクリック
「TablePress」のテーブル作成方法2

テーブルの名前:表の名前
説明:空欄でOK
行数と列数:任意で変更

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

テーブルの名前と説明はいつでも変更可能です。

STEP
テーブルを編集
「TablePress」のテーブル作成方法3

空のテーブルに必要事項を入力し、テーブルを作成します。

行や列のチェックボックスにチェックを入れた状態で、下にある[複製・挿入・削除]ボタンをクリックすると、行と列の数を自由に変更できます。

リンクや画像の挿入・セルの結合などもそれぞれのボタンをクリックして操作可能です。

また行と列はドラッグアンドドロップで並び替え可能です。

「TablePress」のテーブル作成方法4
STEP
テーブルのオプション
「TablePress」のテーブル作成方法5

テーブルの見出し行:任意でチェック
テーブルのフッター行:任意でチェック
行の色を交互にする:任意でチェック
カーソルのある行をハイライト表示:任意でチェック
テーブル名を表示:任意でチェック
テーブルの説明の表示:任意でチェック
追加のCSSクラス:空欄

私はすべてのチェックを外して使用していましたが、各項目は任意でチェックを入れてください。

ページの最上部と最下部にある[プレビュー]ボタンを利用すると、チェックを入れると見た目がどう変わるのか確認できます。

STEP
ライブラリの機能
「TablePress」のテーブル作成方法6

テーブルオプションで「テーブルの見出し行」にチェックを入れた場合のみ設定できる項目で、利用したい機能があれば利用してください。

あとは[変更を保存]をクリックしてテーブルの完成です。

STEP
記事に挿入する
「TablePress」のテーブル作成方法7

ページの右上にあるショートコードを記事にコピペすると、作成したテーブルが挿入されます。

STEP
表示確認
「TablePress」のテーブル作成方法8

実際の記事にテーブルを挿入すると画像のようにシンプルなデザインになります。

「TablePress」のカスタマイズ方法

「TablePress」のカスタマイズ方法

ここからはテーブルをより使いやすくするためのカスタマイズについて解説します。

STEP
TablePressの[プラグインのオプション]をクリック

TablePressにカーソルを合わせるとサブメニューが表示されるので、[プラグインのオプション]をクリックします。

STEP
カスタマイズ用コードを入力する

カスタムCSSのチェックボックスにチェックを入れると、カスタマイズ用のコードを入力できるようになるので、ここにカスタマイズコードを入力します。

最後にページ下部にある[変更を保存]をクリックして完了です。

コードはこのあと紹介します。

テーブルに枠線をつける

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

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

基本的には枠線があった方が見やすいので付けた方がいいです。

このコードを追加すると「TablePress」で作成したすべてのテーブルに適用されます。

テキストを中央寄せする

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

/* センタリング */
.tablepress-id-1 .row-2 .column-1,
.tablepress-id-1 .row-3 .column-1,
.tablepress-id-1 .row-4 .column-1,
.tablepress-id-1 .row-5 .column-1 {
	text-align: center;
}

id:テーブルの識別番号
row:行の指定
column:列の指定

「.row-2 .column-1,」は2行目の1列目
「.row-3 .column-1,」は3行目の1列目
「.row-4 .column-1,」は4行目の1列目
「.row-5 .column-1,」は5行目の1列目

上記のコードを適用すると以下のようになります。

テキストを中央寄せしたい箇所を自由に指定してください。

セルの背景色を変更する

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

/* 背景色 */
.tablepress-id-1 .row-2 .column-1,
.tablepress-id-1 .row-3 .column-1,
.tablepress-id-1 .row-4 .column-1,
.tablepress-id-1 .row-5 .column-1 {
	background-color: #03a9f4; /* 背景色の指定 */
}

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

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

文字装飾をする

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

/* 文字装飾 */
.tablepress-id-1 .row-2 .column-1,
.tablepress-id-1 .row-3 .column-1,
.tablepress-id-1 .row-4 .column-1,
.tablepress-id-1 .row-5 .column-1 {
	font-weight: bold; /* フォント太さ */
	color: #FFFFFF; /* フォントカラー */
}

フォントカラーの「#FFFFFF」の部分は好きなカラーコードに変更してください。

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

コードを組み合わせる

ここまで使用頻度の高いCSSコードを紹介してきましたが、コードは以下のように組み合わせることができます。

/* 商品Aの比較表 */
.tablepress-id-1 .row-2 .column-1,
.tablepress-id-1 .row-3 .column-1,
.tablepress-id-1 .row-4 .column-1,
.tablepress-id-1 .row-5 .column-1 {
	text-align: center;
	background-color: #03a9f4; /* 背景色の指定 */
	font-weight: bold; /* フォント太さ */
	color: #FFFFFF; /* フォントカラー */
}

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

セルの幅を変更する

通常セルの幅は文字数に応じて自動で調整されますが、以下のコードをショートコードに追加すると、セルの幅を自由に変更できます。

column_widths="19%|27%|27%|27%"

パーセンテージは合計で100%になるようにします。

今回の例であれば、テーブルは4列なので100%を19%・27%・27%・27%の四等分にしています。

実際のコードは画像を参考にしてください。

まとめ

クラシックエディターを使っている方は、プラグインでテーブルを作成した方が手間も少なくカンタンなので、ぜひ使ってみてください。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

タップできる目次