【WordPress】テーブル（表）のカスタマイズ

WordPressのブロックエディタの１つである「テーブル」をカスタマイズする方法を解説します。

カスタマイズ前

何もカスタマイズを施していない、デフォルトのテーブルの状態です。
最上段の行は、ヘッダーセクションです。

ページ内の全てのテーブルをカスタマイズする方法

ページ内にある全てのテーブルをカスタマイズする方法です。

サンプルのソースコード

ヘッダー、奇数行、偶数行のセルの文字色と背景色を変更するソースコードになります。

/* ヘッダーセルの文字色・背景色 */
.entry-content th {
  color: #000000;
  background-color: #f39800;
}
/* 奇数行の文字色・背景色 */
.entry-content tr:nth-child(odd) td {
  color: #ffffff;
  background-color: #ff0000;
}
/* 偶数行の文字色・背景色 */
.entry-content tr:nth-child(even) td {
  color: #ffffff;
  background-color: #00a0e9;
}

適用する手順

サンプルのソースコードを適用する方法です。

記事編集画面の下部にある「カスタムCSS」に、ソースコードを貼り付けて下さい。

適用は以上になります。プレビューで確認してみて下さい。

適用した結果

サンプルのソースコードを適用した結果です。

ページ内のテーブルを個別にカスタマイズする方法

ページ内にあるテーブルを個別にカスタマイズする方法です。

サンプルのソースコード

ヘッダー、奇数行、偶数行のセルの文字色と背景色を変更するソースコードになります。

/* ヘッダーセルの文字色・背景色 */
.table-customize th {
  color: #000000;
  background-color: #00ff00;
}
/* 奇数行の文字色・背景色 */
.table-customize tr:nth-child(odd) td {
  color: #000000;
  background-color: #ff00ff;
}
/* 偶数行の文字色・背景色 */
.table-customize tr:nth-child(even) td {
  color: #000000;
  background-color: #fff100;
}

適用する手順

サンプルのソースコードを適用する方法です。

記事編集画面の下部にある「カスタムCSS」に、ソースコードを貼り付けて下さい。

次にテーブルブロックのメニューから「高度な設定」＞「追加CSSクラス」に、CSSクラス名を設定します。
サンプルの場合は、「table-customize」と入力して下さい。

適用は以上になります。プレビューで確認してみて下さい。

適用した結果

サンプルのソースコードを適用した結果です。