WordPressのCSSセレクタの書き方：body_class・post_class・ブロックのクラスを使い分ける

WordPress のテーマでは、<body> タグと投稿を囲む要素に、表示中のページや投稿の状態を表すクラスが自動で付きます。これを使うと、ページごとに ID を調べて CSS を書かなくても、「トップページだけ」「このカテゴリーの投稿だけ」といった指定ができます。

この記事のクラス名は、2026年11月時点の WordPress 6.9 のソースコード（wp-includes/post-template.php の get_body_class() と get_post_class()）で確かめたものです。

まず、実際に付いているクラスを確かめる

クラスはテーマとページによって変わるので、書く前にブラウザーで確かめるのが確実な近道です。

1. 対象のページを開き、右クリックして「検証」（Chrome・Edge）または「調査」（Firefox）を選びます。
2. 開発者ツールの「Elements」（要素）で <body class="…"> の中身を見ます。
3. 投稿の部分は、<article class="…"> など投稿を囲む要素のクラスを見ます。

クラスが1つも無い場合は、テーマが body_class() や post_class() を呼んでいません。自作テーマなら、header.php の <body> を次のように書きます。

<body <?php body_class(); ?>>

ループの中で投稿を囲む要素は次のようにします。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

body_class() が付ける主なクラス

home はフロントページに付くクラスで、front-page というクラスはありません。ページテンプレートのクラスは、テンプレートのファイル名（full-width.php なら full-width）から作られます。

/* トップページのヘッダーだけ透明にする */
body.home .site-header {
    background: transparent;
}

/* 投稿の個別ページだけ本文の幅を狭める */
body.single-post .entry-content {
    max-width: 720px;
}

/* カテゴリーのアーカイブごとに色を変える（スラッグが news と event の場合） */
body.category-news {
    --color-accent: #2271b1;
}
body.category-event {
    --color-accent: #d63638;
}

/* ID が 42 の固定ページだけ */
body.page-id-42 .hero {
    min-height: 100vh;
}

/* full-width.php のテンプレートを使った固定ページ */
body.page-template-full-width .site-main {
    max-width: 100%;
}

category-news のようなクラスはカテゴリーのアーカイブページに付くもので、そのカテゴリーに属する投稿の個別ページには付きません。個別ページで投稿のカテゴリーを使いたい場合は、次の post_class() のクラスを使います。

管理バーと重なる固定ヘッダーを直す

ログイン中は画面上部に管理バーが出るため、position: fixed のヘッダーが隠れることがあります。WordPress の管理バーの高さは、画面幅 782px を超えるときは 32px、782px 以下では 46px です。

body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

画面幅 600px 以下では管理バーがスクロールとともに上へ流れる配置になるため、固定ヘッダーとの間にすき間ができることがあります。気になる場合は、その幅で top: 0 に戻すなど、実機で確かめて調整してください。

post_class() が付ける主なクラス

hentry はすべての投稿に付くクラスで、「表示中の投稿」を表すものではありません。また sticky は、投稿一覧の1ページ目以外（個別ページや2ページ目以降）では付きません。

/* 先頭に固定表示した投稿に線を付ける */
.post.sticky {
    border-left: 4px solid #2271b1;
    padding-left: 1rem;
}

/* 引用フォーマットの投稿 */
.post.format-quote blockquote {
    font-size: 1.25rem;
    font-style: italic;
}

/* カテゴリー news の投稿のタイトルの前にラベルを出す */
.post.category-news .entry-title::before {
    content: "NEWS";
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    background: #2271b1;
    color: #fff;
    font-size: 0.7rem;
}

ブロックエディターのブロックのクラス

ブロックエディターで作った本文には、ブロックごとに wp-block-ブロック名 のクラスが付くものが多くあります。ただし、すべてのブロックに付くわけではありません。

段落ブロックにはクラスが付かないので、本文の段落は .entry-content p のように、本文を囲む要素からたどって指定します（.entry-content はテーマによって名前が違います）。

/* 本文の段落 */
.entry-content p {
    line-height: 1.8;
}

/* 本文の見出し（WordPress 6.2 以降の見出しブロック） */
.entry-content .wp-block-heading {
    margin-top: 2.5em;
}

/* ボタンブロックのボタン */
.wp-block-button .wp-block-button__link {
    border-radius: 4px;
}

/* 「全幅」「幅広」配置の画像 */
.wp-block-image.alignfull {
    margin-left: 0;
    margin-right: 0;
}

特定のブロックだけを変えたい場合は、ブロックの設定サイドバーの「高度な設定」→「追加 CSS クラス」に自分でクラス名を入れ、そのクラスを CSS で指定すると、ほかのブロックに影響しません。

新しい擬似クラスで短く書く

/* 本文の h2〜h4 をまとめて指定 */
.entry-content :is(h2, h3, h4) {
    line-height: 1.3;
}

/* 詳細度 0 で余白の初期値を決める（テーマ側の指定で上書きしやすい） */
:where(.entry-content) > * + * {
    margin-top: 1.5rem;
}

/* button を含むクラス名のリンク以外は下線を消す */
.nav-menu a:not([class*="button"]) {
    text-decoration: none;
}

/* 画像を含むカードだけ本文の上の余白を消す */
.card:has(img) .card-body {
    padding-top: 0;
}

詳細度の考え方は CSSの詳細度の記事、:is() と :where() の違いは :is() と :where() の記事 で詳しく説明しています。

エディターの見た目を公開ページに近づける

クラシックテーマで、ブロックエディターの編集画面にもテーマの CSS を反映させるには、functions.php で次のように読み込みます。パスはテーマのフォルダーからの相対パスです。

<?php
add_action( 'after_setup_theme', function () {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'css/editor-style.css' );
} );

css/editor-style.css には、公開ページと同じセレクタで普通に書きます。WordPress が読み込むときにセレクタを編集画面向けに書き換えます（たとえば body は .editor-styles-wrapper になります）。そのため、.editor-styles-wrapper のような編集画面の内部のクラス名を自分で書く必要はありません。

/* css/editor-style.css */
body {
    font-family: -apple-system, "Hiragino Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #1d2327;
}

.wp-block-quote {
    border-left: 4px solid #2271b1;
    padding-left: 1rem;
}

注意すること

• ブロックの内部のクラス名や HTML の構造は、WordPress の更新で変わることがあります（見出しブロックに wp-block-heading が付いたのは 6.2 からです）。大きな更新のあとは表示を確かめてください。
• page-id-42 のように ID で指定すると、ページを作り直したときや別のサイトへ移したときに ID が変わって効かなくなります。長く使う指定は、ページテンプレートや追加 CSS クラスで書くほうが管理しやすくなります。
• !important を重ねると、あとから上書きするのが難しくなります。まずはセレクタの詳細度で調整します。

まとめ

• ページ単位の指定は body_class() のクラス（home、single-post、page-id-42、category-news など）を使います。front-page というクラスはありません。
• 投稿単位の指定は post_class() のクラスを使います。hentry はすべての投稿に付き、sticky は投稿一覧の1ページ目でだけ付きます。
• 段落ブロックには wp-block-paragraph が付かないので、本文を囲む要素から指定します。
• エディター用の CSS は add_editor_style() で読み込み、公開ページと同じセレクタで書きます。