2026年5月20日

WordPressの子テーマにCSSを追加する方法

テーマ・デザイン

はじめに

WordPressテーマのCSSカスタマイズには「子テーマのstyle.css」「カスタマイザーの追加CSS」「wp_enqueue_styleでの追加」の3つの方法があります。それぞれの使い分けと、CSSが正しく適用されない場合の対処法を解説します。

症状・原因

子テーマのstyle.cssに書いたCSSが反映されない
追加CSSが親テーマのCSSに負けて上書きできない
カスタマイザーの追加CSSとstyle.cssの違いがわからない
CSSを追加する正しい方法がわからない

解決手順

ステップ1：CSSを追加する3つの方法

方法① 子テーマのstyle.css（推奨）:
  → バージョン管理できる
  → ファイルで管理するため構造化しやすい
  → テーマ更新の影響を受けない

方法② カスタマイザーの追加CSS:
  → 外観 → カスタマイズ → 追加CSS
  → 画面を見ながらリアルタイムでプレビュー可能
  → DBに保存されるため移行時にエクスポートが必要
  → 少量のCSS調整に向いている

方法③ wp_enqueue_styleで外部CSSを追加:
  → 別ファイルに分割して管理できる
  → 依存関係を明示できる
  → パフォーマンス最適化（条件付き読み込み）に向いている

ステップ2：子テーマのstyle.cssにCSSを追加する

/*
Theme Name:   My Child Theme
Template:     twentytwentyfive
Version:      1.0.0
*/

/* ===========================
   カラー・フォント
   =========================== */
:root {
    --color-primary: #0073aa;
    --color-secondary: #23282d;
    --font-size-base: 16px;
    --line-height-base: 1.8;
}

body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-secondary);
}

/* ===========================
   ヘッダー
   =========================== */
.site-header {
    background-color: var(--color-primary);
    padding: 20px 0;
}

.site-title a {
    color: #fff;
    text-decoration: none;
}

/* ===========================
   コンテンツエリア
   =========================== */
.entry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 768px) {
    .site-header {
        padding: 15px;
    }

    .entry-content {
        padding: 0 15px;
    }
}

ステップ3：wp_enqueue_styleで追加CSSファイルを読み込む

// 子テーマのfunctions.php
add_action('wp_enqueue_scripts', function(): void {

    // 親テーマのスタイルを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // 子テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['parent-style'],
        wp_get_theme()->get('Version')
    );

    // 追加のCSSファイルを読み込む（例：TOPページのみ）
    if (is_front_page()) {
        wp_enqueue_style(
            'child-front-page',
            get_stylesheet_directory_uri() . '/css/front-page.css',
            ['child-style'],
            '1.0.0'
        );
    }
});

ステップ4：CSSが反映されない場合の対処法

# キャッシュをすべてクリア
wp cache flush
wp transient delete --all

# CSSの読み込み順序を確認
wp eval "
global \$wp_styles;
wp_print_styles();
foreach (\$wp_styles->done as \$handle) {
    echo \$handle . PHP_EOL;
}"

/* 優先度を上げる方法1: セレクターを詳細に */
/* NG: */
.entry-content p { color: red; }

/* OK: より詳細なセレクター */
body .entry-content p { color: red; }

/* 優先度を上げる方法2: !important（最終手段）*/
.entry-content p { color: red !important; }

Chrome DevToolsで確認:
→ F12 → Elements → 要素を選択
→ Computed タブ → 適用されているプロパティを確認
→ Styles タブ → 打ち消し線 = 上書きされているCSS
→ ファイル名を確認してどこから来ているか特定

ステップ5：カスタマイザーの追加CSSを管理する

# カスタマイザーの追加CSSを確認
wp theme mod get custom_css

# カスタマイザーの追加CSSを子テーマのstyle.cssに移行
wp theme mod get custom_css >> wp-content/themes/my-child-theme/style.css

# 移行後、カスタマイザーの追加CSSを削除
wp theme mod remove custom_css

# すべてのテーマmodを確認
wp theme mod list --format=table

ステップ6：CSSの構造化とベストプラクティス

/* CSS変数を活用したメンテナブルなCSS */
:root {
    /* カラーパレット */
    --wp-color-primary:    #0073aa;
    --wp-color-dark:       #1d2327;
    --wp-color-light:      #f0f0f1;

    /* タイポグラフィ */
    --wp-font-size-sm:     0.875rem;  /* 14px */
    --wp-font-size-base:   1rem;      /* 16px */
    --wp-font-size-lg:     1.25rem;   /* 20px */
    --wp-font-size-xl:     1.5rem;    /* 24px */

    /* スペーシング */
    --wp-spacing-sm:       0.5rem;
    --wp-spacing-md:       1rem;
    --wp-spacing-lg:       2rem;
}

/* ブレークポイント（メディアクエリ変数）*/
/* @custom-media --mobile (max-width: 767px); */
/* @custom-media --tablet (max-width: 1024px); */

注意事項

!important の多用はCSSの優先度管理を複雑にします。セレクターの詳細度で対応できる場合はそちらを優先してください
カスタマイザーの追加CSSはDBに保存されます。バックアップ・サイト移行時にエクスポートを忘れずに行ってください
Google Fontsなど外部フォントを読み込む場合は wp_enqueue_style で追加し、style.css の @import は避けてください（パフォーマンスへの影響があります）

まとめ

子テーマへのCSS追加は style.css への直接記述が基本です。反映されない場合はDevToolsで優先度を確認し、セレクターを詳細にすることで解決できます。カスタマイザーの追加CSSは少量の調整向けで、多くの変更はstyle.cssでファイル管理するのが推奨です。

Post Views: 10