どうも、ひろもん（@hiromon_com）です。
記事にテーブル（表）を使うことがあると思いますが、クラシックエディターでテーブルを作成しようとすると、大量のHTMLタグで管理しなければならず非常に手間がかかるため、プラグインを使うのがオススメです。
そこで今回は、私がよく使用していたテーブル作成プラグイン「TablePress」について徹底解説します。
- 「TablePress」の使い方
- 「TablePress」のカスタマイズ方法
「TablePress」の使い方
インストール方法
「TablePress」は無料プラグインのため、WordPressの管理画面からインストールできます。
プラグインにカーソルを合わせるとサブメニューが表示されるので、［新規追加］をクリックします。
右上の検索ボックスに「TablePress」と入力すると、該当するプラグインが表示されます。
［今すぐインストール］をクリックするとインストールが開始されます。
インストール完了後、［有効化］をクリックして完了です。
テーブル作成方法
続いてテーブルの作成方法を解説します。
TablePressにカーソルを合わせるとサブメニューが表示されるので、［新しいテーブルを追加］をクリックします。
テーブルの名前：表の名前
説明：空欄でOK
行数と列数：任意で変更
［テーブルを追加］をクリックするとテーブルの編集画面に移行します。
テーブルの名前と説明はいつでも変更可能です。
空のテーブルに必要事項を入力し、テーブルを作成します。
行や列のチェックボックスにチェックを入れた状態で、下にある［複製・挿入・削除］ボタンをクリックすると、行と列の数を自由に変更できます。
リンクや画像の挿入・セルの結合などもそれぞれのボタンをクリックして操作可能です。
また行と列はドラッグアンドドロップで並び替え可能です。
テーブルの見出し行：任意でチェック
テーブルのフッター行：任意でチェック
行の色を交互にする：任意でチェック
カーソルのある行をハイライト表示：任意でチェック
テーブル名を表示：任意でチェック
テーブルの説明の表示：任意でチェック
追加のCSSクラス：空欄
私はすべてのチェックを外して使用していましたが、各項目は任意でチェックを入れてください。
ページの最上部と最下部にある［プレビュー］ボタンを利用すると、チェックを入れると見た目がどう変わるのか確認できます。
テーブルオプションで「テーブルの見出し行」にチェックを入れた場合のみ設定できる項目で、利用したい機能があれば利用してください。
あとは［変更を保存］をクリックしてテーブルの完成です。
ページの右上にあるショートコードを記事にコピペすると、作成したテーブルが挿入されます。
実際の記事にテーブルを挿入すると画像のようにシンプルなデザインになります。
「TablePress」のカスタマイズ方法
ここからはテーブルをより使いやすくするためのカスタマイズについて解説します。
TablePressにカーソルを合わせるとサブメニューが表示されるので、［プラグインのオプション］をクリックします。
カスタム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％の四等分にしています。
実際のコードは画像を参考にしてください。
まとめ
クラシックエディターを使っている方は、プラグインでテーブルを作成した方が手間も少なくカンタンなので、ぜひ使ってみてください。
コメント