はじめに
テーマのCSSを上書きしたいのに変更が反映されない場合、CSSの「詳細度（Specificity）」の仕組みを理解することが重要です。より詳細なセレクター・後から読み込まれるCSS・!important の順に優先されます。
症状・原因
- 子テーマのstyle.cssに書いたCSSが反映されない
- テーマのCSSが強すぎて上書きできない
!importantを使ってもまだ上書きできない- どこのCSSが適用されているかわからない
解決手順
ステップ1：CSSの詳細度（Specificity）を理解する
詳細度の計算（高いほど優先）:
インラインスタイル 1,0,0,0 ← 最強
ID セレクター #header 0,1,0,0
クラス/属性 .nav, [type] 0,0,1,0
要素 h1, p 0,0,0,1
例:
h1 0,0,0,1 ← 弱い
.content h1 0,0,1,1
#main .content h1 0,1,1,1 ← 強い
body #main .content h1 0,1,1,2 ← さらに強い
!important → 詳細度を無視して最優先（乱用禁止）ステップ2：DevToolsで上書きしたいCSSを特定する
Chrome DevToolsの使い方:
1. F12 → Elements タブ
2. 変更したい要素を右クリック → 「検証」
3. Styles パネルを確認:
→ 打ち消し線 = このCSSは上書きされている
→ ファイル名:行番号 = どのファイルのCSSか
→ Computed タブ = 実際に適用されているCSS
4. セレクターをコピー:
→ 右クリック → Copy → Copy selector
→ これをベースに詳細度を上げるステップ3：詳細度を上げてCSSを上書きする
/* テーマの元のCSS（詳細度: 0,0,1,1） */
.entry-content p {
color: #333;
font-size: 16px;
}
/* 上書き方法1: 親要素を追加して詳細度を上げる */
body .entry-content p {
color: #0073aa;
font-size: 18px;
}
/* 上書き方法2: クラスを追加 */
.site-main .entry-content p {
color: #0073aa;
}
/* 上書き方法3: さらに詳細に */
.single-post .site-main .entry-content p {
color: #0073aa;
}
/* 最終手段: !important（多用禁止） */
.entry-content p {
color: #0073aa !important;
}ステップ4：子テーマのstyle.cssで確実に上書きする
/* wp-content/themes/my-child-theme/style.css */
/*
Theme Name: My Child Theme
Template: parent-theme-slug
Version: 1.0.0
*/
/* ================================
テーマのグローバルカラーを上書き
================================ */
:root {
--theme-primary-color: #0073aa !important;
--theme-font-size: 16px !important;
}
/* ================================
ヘッダーCSSを上書き
================================ */
.site-header,
.wp-block-template-part[data-slug="header"] {
background-color: #1d2327;
color: #ffffff;
}
/* ================================
レスポンシブCSSを上書き
================================ */
@media (max-width: 768px) {
.site-header {
padding: 10px 15px;
}
}ステップ5：wp_enqueue_styleで読み込み順序を制御する
// functions.php — 子テーマの後に追加CSSを読み込む
add_action('wp_enqueue_scripts', function(): void {
// テーマのCSSが読み込まれた後に、上書き用CSSを読み込む
wp_enqueue_style(
'my-overrides',
get_stylesheet_directory_uri() . '/css/overrides.css',
['parent-style', 'child-style'], // 依存関係を指定
wp_get_theme()->get('Version')
);
}, 20); // priority 20 = テーマより後に実行
// 特定ページのみCSSを読み込む
add_action('wp_enqueue_scripts', function(): void {
if (is_page('contact')) {
wp_enqueue_style(
'contact-page',
get_stylesheet_directory_uri() . '/css/contact.css',
['my-overrides'],
'1.0.0'
);
}
});ステップ6：Block テーマ（FSE）のCSSを上書きする
/* theme.json のカスタマイズが優先される場合 */
/* editor-style.cssで上書き */
/* FSEテーマのブロックCSSを上書き */
.wp-block-group {
max-width: 1200px !important;
}
.wp-block-post-title {
font-size: clamp(1.5rem, 5vw, 3rem);
}
/* グローバルスタイルのCSS変数を上書き */
:root {
--wp--preset--color--primary: #0073aa;
--wp--preset--font-size--medium: 1rem;
}# 現在のブロックスタイルシートを確認
wp eval "
global \$wp_styles;
wp_print_styles();
foreach (\$wp_styles->queue as \$handle) {
\$src = \$wp_styles->registered[\$handle]->src ?? '';
if (strpos(\$src, 'block') !== false) {
echo \$handle . ': ' . \$src . PHP_EOL;
}
}"注意事項
!importantの多用はCSSのデバッグを困難にします。できるだけセレクター詳細度で対応してください- Block テーマ（FSE対応テーマ）では
theme.jsonの設定がCSSより優先される場合があります - テーマを直接編集した場合、テーマ更新で変更が消えます。必ず子テーマを使用してください
まとめ
テーマCSSの上書きは「DevToolsでセレクターを特定 → 詳細度を上げる → 子テーマのstyle.cssに記述 → wp_enqueue_styleで読み込み順序を制御」の順で解決します。!important は最終手段です。