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

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

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

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

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

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

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

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

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

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

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

列単位でCSS(スタイルシート)を指定する方法

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

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

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

書式

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

CSS

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

見た目が変わります。

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

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

子テーマを編集

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

ダッシュボードの「外観」「テーマエディター」をクリック
  1. スタイルシートを選択
  2. 編集するテーマで「ystandard-child」を選択
編集するテーマで「ystandard-child」を選択

cssを編集する。

cssを編集する。

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

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

まとめ

  1. WordPressのGutenbergのテーブル で「高度な設定」「追加cssクラス」を選択します。
  2. 列単位でCSS(スタイルシート)を指定したい場合は、nth-of-type擬似クラスを使用します。

特定のclass名がつけられた要素を対象にスタイルを適用

WordPressでCSSを編集しカスタマイズする方法