本サイトはプロモーションが含まれています。

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

2023年1月19日

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

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

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

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

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

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

Gutenberg の テーブル の 1列目 だけカスタマイズするには「高度な設定」を使う

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

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

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

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

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

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

nth-of-type(n)

擬似クラスの一種で、 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擬似クラスを使用します。

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