WordPress | Gutenbergでthを使う方法と簡単なCSSデザイン

2019-02-192021-06-03WordPress Gutenberg,WordPress

新エディタ「Gutenberg」のブロックから作成する「テーブル（table）」は簡単にテーブルが作成できるものの、デフォルトのエディタの範囲内で編集できるカスタマイズ性というか自由度が低いですよね

thを挿入したい

自動で生成されるtable構造は以下

<table class="wp-block-table">
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>

デフォルトで<th>入れられても困るのだけど、 <th> を使いたい時も多いはず

エディタの機能でth入れるコマンドがないので一度HTML編集にしてからthを入れて戻す

<tr><th></th><th></th></tr>

HTMLにしてから戻すと消されるモノも多々ありますが、流石に<th>は消されないですね

※thの文字が中央なのと背景色が付いてるのは、テーマのデフォルトCSSです

「Gutenberg」のCSSでもthは定義されてますが、tdと一緒

GutenbergでのthをCSSでデザインする

Gutenbergのデフォルトブロックからテーブルを挿入するとクラス名に「wp-block-table」が入ります

このクラス名に対してCSSを定義する事が可能

.wp-block-table th{
	background: #f5f5f5;
}

また右カラムにあるテーブルブロック選択中の「ブロック」ー「高度な設定」ー「追加 CSS クラス」からCSSクラスを追加できるので記事に合わせて変える事が可能です

.wp-block-table my-table th{
     background: #f5f5f5;
 }

テーブルの<figure>消されるんだけど、誰か助けて