WordPress5.0から採用されたブロック管理形式のエディタ、Gutenberg。早速切り替えて使っている方も、「どうも使いにくい」とClassic Editorプラグインなどを追加して旧エディタに戻して使っている方も多いと思います。
中でもGutenbergエディタ標準ブロックの１つ、テーブルブロックは別のプラグインで作ってショートコードで挿入・・なんてしなくても、簡単にテーブルを作成できるのが魅力です。
が、このテーブルブロック、基本となるデザインが２つしか用意されていなかったり、レスポンシブ対応させるため？に、列の幅が自動調整されるようになっていたり、逆に固定幅にすると列の幅が均等になって見栄えが悪かったり、文字の大きさが変えられなかったり・・・とちょっと使い勝手が悪いんです。
そこで、実際にテーブルブロックをつかっていくうちに「こんなときどうすれば思い通りのテーブルが作れるの？」と感じた事柄について、私自身の備忘録を兼ね、カスタマイズ方法を紹介しておこうと思います。
１．独自のテーブルデザインを登録しよう
ブロックエディタでテーブルを追加すると、こんな感じの表が挿入されます
| テーブルのヘッダー | テーブルのヘッダー |
|---|---|
| 内容１ | 内容２ |
| 内容３ | 内容４ |
また、テーブルのスタイルがもう１つあり、同じ表でも「ストライプ」を選択することでこんなデザインの表もできます
| テーブルのヘッダー | テーブルのヘッダー |
|---|---|
| 内容１ | 内容２ |
| 内容３ | 内容４ |
ただ・・・どちらもなんだかアレな感じがしますよね？はっきり言ってダサい（笑）。
テーブルのデザイン設定がどうなっているかというと、「高度な設定」に追記されるCSSセレクタは
- 「デフォルト」・・・CSSセレクタは「なし」（テーマなどの指示に従う）
- 「ストライプ」・・・CSSセレクタには「is-style-stripes」
つまり、「デフォルト」の場合はテーブルブロックに標準で割り当てられる「wp-block-table」というセレクタに、「ストライプ」の場合は「is-style-stripes」というセレクタに対してテーマのCSSにデザイン指示の記述がされていればそのように表示され、されていなければWordPressプログラムの標準デザインが適用されて上のように表示されるということになります。
なんて説明聞いてもやっぱりちょっとアレですよね？？
もちろんこれが分かれば「wp-block-table」や「is-style-stripes」に対して追加でデザイン要素をCSSファイルへ追加すればいいのですが、それでは全部の表に対して共通指示になってしまいますし、別のCSSを割り当てるために別のセレクタでデザイン指示を書いておいて、テーブルブロックを追加するたびに、「高度な設定」の「追加CSS」へそのセレクタを記述する・・なんてのも記憶に限界があって難しいですから、今回は独自のデザインパターンを作ってカスタマイズするという方法をとります。
なんだかごちゃごちゃ面倒臭そうと思ってる方、そんなことはありません。以前に公開した
をご覧いただければ、簡単に独自デザインの追加ができるんです。デザイン追加すると
という風に２種類しかなかったデザイン設定を
のように増やすことができます。目で見て選択できるようになるので便利ですよね。リンク先のページでも紹介している通り、このパターンは任意に増やせるので、あらかじめいろいろなデザインの表を用意しておいてその中から選ぶという使い方ができるようになります。
まずはこの機能を実装した上で、次項で紹介する方法でテーブル要素に対するいろいろな装飾を加えて、思った通りの表を作る＆テーブルブロックで簡単に呼び出せるようにするというのが今回の目標です。
２．テーブルの表示方法をカスタマイズしよう
ここからは装飾に関するいろいろなカスタマイズ方法を紹介していきます。前項で紹介した
の方法でデザインパターンを追加した場合には、それぞれ紹介するCSSコードをテーマのCSSファイルへ追加すれば適用されますが、他の名前（セレクタ）を追加した場合には、コードも置き換えてください。
テーブルに線を入れる方法
外枠に黒の太線、内側に黒の細線を入れるデザインコードです。
.wp-block-table.is-style-border {
border-collapse: collapse;
}
.wp-block-table.is-style-border table {
width: 100%;
border: 3px solid #333;
border-spacing: 0px;
}
.wp-block-table.is-style-border th,
.wp-block-table.is-style-border td {
border: solid 1px #333;
}２行目の「border-collapse: collapse;」でテーブル内の隣り合うセルの線を１本に見えるようにしています
５行目～７行目で、テーブルの幅を横幅いっぱいに設定し、周りに黒で3pxの枠線を引き、「border-spacing: 0px;」で周囲の線とセルの外側の線が１本に見えるようにしています
１１行目で、セルのth(見出し)、td(データ)のそれぞれに黒で1pxの枠線を引いています
特定の列の幅を任意の幅にする方法
.wp-block-table.is-style-border tr td:nth-child(1) {
width: 100px;
}１行目で対象となるテーブルを指定し、tr td:nth-child(1)で列を指定しています
２行目で幅を100pxに指定しています
※tr td:nth-child(1)の括弧内の値を変更することで左からいくつめの列なのかの指定ができます
特定のセルの文字を装飾する方法
テーブルブロック内のセルでは、文字の色は設定できるようになっていますが大きさの変更などはできません。また、文字列として扱うように設定されているため、HTMLとCSSで装飾しようとしても、HTMLが文字として認識されてしまい、うまくいきません。
そんな時は、一旦HTML形式での編集にしてからclassを付加したHTMLタグを挿入し、元の状態に戻すことで解決できます。
画像のように「・・・」をクリックして「HTMLとして編集」をクリックするとテーブルとして見えていたところがHTMLタグに変わりますから、spanタグなどでclass指定をしておき、CSSで装飾するようにします。例えば
<span class="table-cel-design">入力例</span>というのをHTML編集のテーブル内へ挿入し、CSSへ
.table-cel-design(
background:#000;
font-size:1.6em;
)を追記すれば、「入力例」という文字の背景が黒になり、文字が通常の1.6倍で表示されます。
※この後通常のテーブル表示に戻した場合には、装飾された「入力例」という文字が表示された状態になっているので、この部分に実際に表示させる文字列を上書きするようにします。「入力例」という文字列を先に消してしまうと、設定したcss classがクリアされ、通常の文字デザインに戻ってしまいますから注意しましょう。
偶数（奇数）行だけに背景色を入れる方法
.wp-block-table.is-style-border td {
background: #eee;
}
.wp-block-table.is-style-border tr:nth-child(odd) td {
background: #fff;
}上のデザインコードでは、１～３行目で背景をすべて薄いグレーに指定してから、４～６行目で偶数行の背景を白にしています。
４行目の:nth-child(odd)を:nth-child(even)にすると、奇数行が白になります。
この例では背景すべてに色を付けてから白い場所を指定していますが、逆の考え方でも構いません（全部白にしておいて、〇数行に色を付ける）
いかがでしたか？デザインパターンを増やすのにテーマのfunctions.phpへ追記するスキル、デザインの変更にCSSの基本知識が必要ではありますが、最低限この程度のカスタマイズができれば、WordPressの標準テーブルブロックの使い勝手が格段に上がると思います。
テーブルブロックでセルの結合や分割は難しい
ここまでいろいろと紹介してきましたが、恐らくやりたいことはセルの結合や分割ではないでしょうか？
ただ、残念ながら、ちょっとカスタマイズして．．．というのがWordPress5.8の段階では難しく、今後もできるようになるのかは甚だ疑問です。
ではいつも通り、別の場所で作ったテーブルをブロックまたはショートコードで挿入するしかないのか．．それを払拭できるプラグインが登場しました。
通常のテーブルブロックとは別のブロックを追加するということにはなりますが、ブロックエディタの、編集しながら実際の画面のように表現するという目的は達成できますので、オンデマンドで操作したいという方にはおすすめのプラグインです。
本記事の更新（変更）履歴
| 更新日 | 更新内容 |
|---|---|
| 2020年11月12日 | 記事公開しました |
| 2022年 1月19日 | 柔軟なテーブルブロックを挿入できるプラグイン「Flexible Table Block」の紹介部分を追加しました。 |
