Gutenbergが導入されてから随分と改良も進み、より使いやすいエディターになりました。スタイル追記用のプラグインは必要ないレベルになりました。（と言うよりそのようなプラグインは今は使わない方が良いです）
今回は、投稿記事内のテーブルにおいて、特定の列の幅などを変える場合のスタイルシートの記述について解説しています。 （CSS3）
テーブルのデフォルトセレクター
Gutenbergでのテーブルの基本CSSセレクターは wp-block-table です。固定幅のテーブルの場合は has-fixed-layout が追加されます。
疑似クラス :nth-child()
疑似クラス :nth-child() を用いると一括でテーブルの列のスタイルを指定できます。
このテーブルの特定の列（この例では一列目）の幅を指定し、セルの中をセンタリングするときは、子テーマのスタイルシート内に以下のように記述します。
また、二列目の左側にはパディングを入れて見やすくし、左寄せとしています。幅の指定を割合（％）としているのは、レスポンシブ対応（スマホ等でもきれいに表示される）ためです。
.wp-block-table tr td:nth-of-type(1) {
text-align: center;
width: 10%;
}
.wp-block-table tr td:nth-of-type(2) {
padding-left: 10px;
text-align: left;
width: 40%;
}全ての記事の全てのテーブルに指定する際はこのようにします。
特定の記事の特定のテーブルだけに指定する
特定の記事の特定のテーブルだけに指定するには、当該テーブルにカーソルをもっていってから、投稿編集のページの右側でブロックを選択し、「高度な設定」の中にクラス名を書きます。
その後、スタイルシートの中に以下のように記述します。例ではクラス名をsample_classとしています。
.sample_class tr td:nth-of-type(1) {
text-align: center;
width: 10%;
}
.sample_class tr td:nth-of-type(2) {
padding-left: 10px;
text-align: left;
width: 40%;
}特定の記事がひとつだけの場合は、このコードは、ページ内のスタイルシート内でもどちらでも構いません。
これらのスタイルを適用したテーブルは、再利用可能なブロックとして登録しておくと便利です。その際、ひな形として使いまわす場合は、はじめに「通常のブロックへの変換」を行ってください。スタイルは変わらず適用されます。
