TablePressの使い方。文字色・枠線・セル塗りつぶし等の設定方法を紹介します。

WordPressで表（テーブル）を作成する際にマストいっても良いプラグイン「TablePress」の使い方について紹介します。

ブログでもアフィリエイトサイトでも必須の機能なので、ぜひ本記事を読んで使用してみてください。

テーブルの作成方法

まずはテーブルの作成方法です。「新規追加**」**タブを押します。

次にテーブル名と行数（横軸）、列数（縦軸）を入力して、

「テーブル追加」を押下します。

すると新規テーブルが作成されます。今回はテーブルID13で作成されました。

このテーブルIDはTablePress内で一意にテーブルを識別する大切な値なので必ず覚えておいてください。

次にテーブルの内容を入力していきます。

下に遷移するとテーブルのオプションを設定できます。

• テーブルの最初の行をテーブル見出しにする
• 連続する行の背景色を別々の色にする。
• マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示する

がオススメの設定になります。

次にDataTables JavaScriptライブラリの機能を設定します。

「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する」は使用しないのでチェックは外します。

最後に「変更を保存」を押下します。

最後に記事にテーブルを挿入する際には、下のようにショートコードを入力します。

↓が例です。

※この表では枠線がついていますが、デフォルトでは枠線がついていません。

CSVファイル、TSVファイルなどからテーブルをインポート

インポートタブを利用することでCSVファイルやTSVファイルからテーブルの情報を入れることが出来ます。

手動入力では、カンマ区切り、TAB区切りの2つの方法でテーブルを作成することができます。

↓の例はカンマ区切りで手動入力した場合の画面になります。もちろん最後にインポートを押下します。

すると下のように手動入力入力からのインポートとなります。

個人的にはExcelでテーブルと値を作ってしまって、手動入力する方法が一番効率が良いと思います。

装飾するセルを指定する記述フォーマット

各テーブルを装飾するにはプラグインオプションタブのカスタムCSSで設定します。

カスタムCSSで設定できるTablePressでセルを装飾する基本系は↓になります。

.tablepress-id-○○ .row-×× .column-△△,
.tablepress-id-○○ .row-×× .column-△△,
.tablepress-id-○○ .row-×× .column-△△ {
  装飾を記述
}

tablepress-id-○○ が指定しますテーブルIDになります。

row-×× が指定する行（横軸）になります。

column-×× が指定する列（縦軸）になります。

複数のセルを変更する場合はカンマ区切りで指定することができますが、

最後の1つにはカンマがつかないので気をつけてください。

またヘッダーを指定する場合には↓のように記載します。

.tablepress thead th {
  装飾を記述
}

.tablepress と指定するとすべてのTablePressで作成した表に影響します。

thead th はTablePress固有の記載方法ですので覚えておいてください。

文字の色を変える方法

文字の色を変える方法です。

↓の記述をカスタムCSSに追記します。

↓の例ではヘッダー全体の文字色を黒に変えています。

.tablepress thead th {
  color: #000000;
}

color: の後ろを好きな色に変更すれば変えることができます。

文字を強調（太字化）させる方法

文字を強調（太字化）方法です。

↓の記述をカスタムCSSに追記します。

↓の例では2行目の1列目「値①」の文字を強調させています。

.tablepress-id-16 .row-2 .column-1 {
  font-weight: bolder;
}

color: の後ろを好きな色に変更すれば変えることができます。

セルを塗りつぶす方法

セルを塗りつぶす方法です。↓のようにカスタムCSSに追記します。

下の例では2行目の3列目「値③」の背景色をピンク色にしています。

.tablepress-id-16 .row-2 .column-3 {
  background-color: #ffe5e5;
}

background-color: の後ろを変更すれば塗りつぶしたい色を変えることができます。

枠線を引く方法

枠線を引く方法です。↓のようにカスタムCSSに追記します。下の例では全テーブルに枠線を引きます。

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

これはTablepressで作成したすべてのテーブルに枠線を付けることができます。

セルの横幅を変更する方法

セルの横幅を記載する時は、ショートコードに以下のオプションを追記します。

このように左の列から順に幅を指定します。指定の際には％で幅を指定する際は合計が100％になるよう指定してください。

まとめ

今回指定した装飾をすべて使用したテーブルは以下のようになります。

装飾方法については、基本的なCSSを使用すればうまくいくので試してみてください。

［改訂版］WordPress　仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング