はじめに
WordPressのCSSを書く際は、テーマが自動出力するクラス（body_class()・post_class()）を活用することで、ページや投稿の状態に応じたスタイルを効率よく適用できます。Gutenbergブロックには専用のクラスがあり、それらを正しく指定することが重要です。
症状・原因
- CSSが意図したページにだけ適用されない
- Gutenbergブロックのスタイルが変更できない
- セレクタが長くなってメンテナンスが困難
- 管理バー表示時にレイアウトがずれる
解決手順
ステップ1：body_class()のクラスを活用する
/* トップページのみ */
body.home .site-header { background: transparent; }
body.front-page .site-header { background: transparent; }
/* 投稿個別ページ */
body.single-post .entry-content { max-width: 720px; }
/* カテゴリ別 */
body.category-news { --color-accent: #2271b1; }
body.category-event { --color-accent: #d63638; }
/* ログイン時（管理バーあり） */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .site-header { top: 46px; }
}
/* 固定ページID別 */
body.page-id-42 .hero { min-height: 100vh; }
/* ページテンプレート別 */
body.page-template-full-width .site-main { max-width: 100%; }ステップ2：post_class()のクラスを活用する
/* スティッキー投稿（トップに固定） */
.post.sticky {
border-left: 4px solid #2271b1;
padding-left: 1rem;
}
/* 特定フォーマット */
.post.format-video .entry-content { padding: 0; }
.post.format-quote blockquote {
font-size: 1.5rem;
font-style: italic;
}
/* 現在表示中の投稿 */
.post.hentry { margin-bottom: 3rem; }
/* カテゴリ別 */
.post.category-news .entry-title::before {
content: 'NEWS';
display: inline-block;
background: #2271b1;
color: #fff;
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
margin-right: 0.5rem;
border-radius: 2px;
}ステップ3：Gutenbergブロックのセレクタ
/* コアブロックのセレクタ */
.wp-block-paragraph { }
.wp-block-heading { }
.wp-block-image { }
.wp-block-gallery { }
.wp-block-quote { }
.wp-block-code { }
.wp-block-table { }
.wp-block-columns { }
.wp-block-column { }
.wp-block-button .wp-block-button__link { }
/* カバーブロック */
.wp-block-cover { min-height: 400px; }
.wp-block-cover__inner-container { }
/* アライン */
.wp-block-image.alignfull { }
.wp-block-image.alignwide { }
.wp-block-image.alignleft { float: left; margin-right: 1.5rem; }
/* エディタースタイル（editor-style.css）*/
.editor-styles-wrapper .wp-block-paragraph {
font-size: 1rem;
line-height: 1.8;
}ステップ4：擬似クラス・擬似要素の活用
/* :is() で複数セレクタをまとめる */
:is(h1, h2, h3, h4) {
font-weight: 700;
line-height: 1.3;
}
/* :where() は詳細度0（上書きしやすい） */
:where(.entry-content) > * + * {
margin-top: 1.5rem;
}
/* :not() で除外 */
.nav-menu a:not([class*="button"]) {
text-decoration: none;
}
/* :has() で親を選択（モダンブラウザ） */
.card:has(img) .card-body { padding-top: 0; }
/* 奇数・偶数 */
.post-grid .card:nth-child(odd) { background: #f9f9f9; }
/* 最後の要素 */
.nav-menu > li:last-child > a { padding-right: 0; }ステップ5：ブロックエディタのエディタースタイルを追加する
// functions.php
add_theme_support('editor-styles');
add_editor_style('css/editor-style.css');/* css/editor-style.css: エディター内のスタイル */
.editor-styles-wrapper {
font-family: -apple-system, 'Hiragino Sans', sans-serif;
font-size: 1rem;
line-height: 1.8;
color: #1d2327;
}
.editor-styles-wrapper .wp-block-quote {
border-left: 4px solid #2271b1;
padding-left: 1rem;
color: #50575e;
}注意事項
- Gutenbergのコアブロッククラスはバージョンアップで変わることがあります。テーマサポートと合わせてアップデート時に確認してください
:has()は比較的新しい疑似クラスです。Safari 15.4+・Chrome 105+・Firefox 121+以降で使えます!importantの多用は詳細度の問題を複雑にします。セレクタを具体的にして詳細度で勝つ方が長期的にメンテナブルです
まとめ
body.home・body.single-post などの body_class() 出力クラスでページ別スタイルを、post.sticky・post.category-{slug} などの post_class() 出力クラスで投稿別スタイルを適用します。Gutenbergブロックは .wp-block-{name} クラスで選択し、エディタースタイルは add_editor_style() で追加します。