WordPress の Gutenberg のテーブルの 1列目だけカスタマイズ

WordPress の Gutenberg のテーブルの 1列目だけカスタマイズする方法 を紹介します。

WordPress の Gutenberg のテーブルブロック 1列目だけ装飾したいと思いませんか？

高度な設定を使えばWordPressのGutenbergのテーブルの1列目だけカスタマイズ出来ます。

WordPress の Gutenberg のテーブルの 1列目だけカスタマイズする方法

WordPressのGutenbergのテーブルで「ヘッダーセクション」を選択すると1行目はヘッダーとして認識されます。

今回は 1列目を装飾 したいので WordPressのGutenbergのテーブルで「高度な設定」「追加cssクラス」を選択します。

「追加CSSクラス」に「info」と入れました。

列単位でCSS（スタイルシート）を指定したい場合は、nth-of-type擬似クラスを使用します。

擬似クラスの一種で、 n番目のその種類の要素にスタイルを適用する際に使用します。

デザインを適用させたい要素の後に「:」をつけて擬似クラスを指定します。

.クラス名 td:nth-of-type(1){
  プロパティ名:値;
}

.info td:nth-of-type(1) {
  color: #ffffff;
  background: #009854;
}

見た目が変わります。

順位	1	2	3
名前	富士山	北岳	奥穂高岳・間ノ岳
標高	3,776m	3,193m	3,190m

wordpressのテーマに「yStandard」を使っているので「ystandard-child」を編集。

ダッシュボードの「外観」「テーマエディター」をクリック

CSS を編集する。

ファイルを更新をクリック

WordPress で CSS を編集しカスタマイズする方法 WordPressの見た目を良くしたいと思いませんか？ WordPress の見た目を装…

jikuu.work