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

WordPress の CSS の class名 を 確認 する方法

2023年5月7日

WordPress の CSS の class名 を 確認 する方法

CSSの class名 が分からないとCSSが反映されないのでGoogle Chromeの「検証」を使って 確認 します。

wordpressのテーマにシンプルな「yStandard」を使っているのでほぼ装飾されていませんでした。

見た目も大事なので最低限の装飾をすることにしました。

CSSの編集方法を選択する。

wordpressにはcssの編集方法は3つ用意されています。

  1. 親テーマ
  2. 子テーマ
  3. 追加CSS

今回は、「 子テーマ 」使うことにしました。

Google Chromeの「検証」を使いCSSの class名 を 確認 する。

  1. 調べたいところを右クリック
  2. 「検証」をクリック

サイドバーのクラス名は「sidebar-wrapper」であることが分かりました。

サイドバーのクラス名

同じように見出し「h2・h3」を確認します。

h2が「.entry-content h2
h3が「.entry-content h3

必要があれば他のクラス名も確認しましょう。

子テーマを編集

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

ダッシュボードの「外観」「テーマエディター」をクリック
  1. スタイルシートを選択
  2. 編集するテーマで「ystandard-child」を選択
wordpressの子テーマでcssが反映されない場合

cssを編集する。

cssを編集する。

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

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

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