WordPress 5.x テーブルの特定の列の幅などの装飾

システム運用保守

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%;
}

特定の記事がひとつだけの場合は、このコードは、ページ内のスタイルシート内でもどちらでも構いません。

これらのスタイルを適用したテーブルは、再利用可能なブロックとして登録しておくと便利です。その際、ひな形として使いまわす場合は、はじめに「通常のブロックへの変換」を行ってください。スタイルは変わらず適用されます。

タイトルとURLをコピーしました