2026年5月17日

WordPressでCSSが反映されない・効かない問題の解決方法【完全ガイド】

テーマ・デザイン

はじめに

WordPressでCSSを変更したのに画面に反映されない問題は非常によくあるトラブルです。原因はキャッシュ・CSS詳細度の問題・スタイルの読み込み順序など様々で、それぞれ適切な対処が必要です。

症状・原因

CSSファイルを編集したのにデザインが変わらない（キャッシュが原因の可能性）
!importantを使っても効かない（CSS詳細度が低い）
子テーマのCSSが親テーマに上書きされてしまう
wp_enqueue_style()で追加したスタイルが読み込まれない

解決手順

ステップ1：キャッシュをクリアする

# プラグインキャッシュをクリア
wp cache flush

# WP RocketのキャッシュをWP-CLIでクリア
wp rocket clean --confirm

# LiteSpeed Cacheのクリア
wp litespeed-purge all

# CloudflareのキャッシュをAPIでパージ
curl -X POST "https://api.cloudflare.com/client/v4/zones/{ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer $CF_API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything":true}'

# ブラウザキャッシュをバイパス（開発時）
# Ctrl+Shift+R（Windows/Linux）または Cmd+Shift+R（Mac）でハードリロード

// functions.php: CSSファイルのバージョンを動的に変更してキャッシュバスティング
function get_css_version(string $file_path): string {
    $full_path = get_stylesheet_directory() . '/assets/css/' . $file_path;

    if (file_exists($full_path)) {
        return filemtime($full_path); // ファイル更新日時をバージョンとして使用
    }

    return wp_get_theme()->get('Version');
}

add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_style(
        'my-theme-style',
        get_stylesheet_directory_uri() . '/assets/css/main.css',
        [],
        get_css_version('main.css')  // ファイルを変更するたびにバージョンが変わる
    );
});

ステップ2：CSS詳細度（Specificity）の問題を解決する

// CSS詳細度を上げる方法
// 1. ID セレクタを使う（詳細度: 100）
// 2. クラスを複数指定する（詳細度: 10ずつ加算）
// 3. !importantを使う（最後の手段）

/* 問題: 詳細度が低くてスタイルが効かない */
.my-button {
    background: blue;  /* 詳細度: 10 */
}

/* 解決策1: 詳細度を上げる */
.site-content .my-button {
    background: blue;  /* 詳細度: 20 */
}

/* 解決策2: テーマのセレクタを確認してより具体的にする */
body.page .entry-content .my-button {
    background: blue;  /* 詳細度: 31 */
}

/* 解決策3: CSSの読み込み順序を後にする（より後に読み込まれるスタイルが優先） */

/* 解決策4: !important（最後の手段） */
.my-button {
    background: blue !important;  /* 詳細度: 最高 */
}

/* CSS Layer（モダンな解決策） */
@layer theme, custom;

@layer theme {
    .my-button { background: blue; }
}

@layer custom {
    .my-button { background: red; }  /* customレイヤーが優先 */
}

ステップ3：正しいCSSの読み込み方法を実装する

// functions.php: 正しいwp_enqueue_style()の使い方
add_action('wp_enqueue_scripts', function(): void {
    $theme_version = wp_get_theme()->get('Version');

    // 正しい読み込み順序（dependenciesで依存関係を設定）
    wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', [], '5.3.0');

    // テーマのメインスタイル（bootstrapに依存）
    wp_enqueue_style(
        'my-theme-main',
        get_stylesheet_directory_uri() . '/assets/css/main.css',
        ['bootstrap'],  // bootstrapの後に読み込む
        $theme_version
    );

    // カスタムスタイル（テーマの後に読み込む）
    wp_enqueue_style(
        'my-theme-custom',
        get_stylesheet_directory_uri() . '/assets/css/custom.css',
        ['my-theme-main'],  // テーマの後に読み込む
        $theme_version
    );
});

// 子テーマでの正しい親テーマCSSの読み込み
add_action('wp_enqueue_scripts', function(): void {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        [],
        wp_get_theme()->parent()->get('Version')
    );

    // 子テーマのカスタムCSSを親の後に読み込む
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        ['parent-style'],  // 親テーマCSSに依存
        wp_get_theme()->get('Version')
    );
});

ステップ4：インラインCSSとCSSカスタムプロパティを活用する

// 小さなカスタムスタイルはインラインで追加
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_style('my-theme-main', get_stylesheet_uri());

    // インラインCSSを既存スタイルシートに追加
    $primary_color = get_theme_mod('primary_color', '#0073aa');
    $custom_css = sprintf(
        ':root { --primary-color: %s; --primary-color-dark: %s; }',
        esc_attr($primary_color),
        esc_attr(adjustBrightness($primary_color, -20))
    );

    wp_add_inline_style('my-theme-main', $custom_css);
});

// テーマカスタマイザーの設定をCSSカスタムプロパティに反映
add_action('wp_head', function(): void {
    $colors = [
        'primary'    => get_theme_mod('primary_color', '#0073aa'),
        'secondary'  => get_theme_mod('secondary_color', '#23282d'),
        'text'       => get_theme_mod('text_color', '#1d2327'),
        'background' => get_theme_mod('background_color', '#ffffff'),
    ];

    echo '<style>:root {';
    foreach ($colors as $name => $color) {
        printf('--color-%s: %s;', esc_attr($name), esc_attr($color));
    }
    echo '}</style>';
});

ステップ5：CSS読み込みを確認・デバッグする

// 読み込まれているCSSを確認
add_action('wp_print_styles', function(): void {
    if (!current_user_can('manage_options') || !isset($_GET['debug_css'])) return;

    global $wp_styles;

    echo '<!-- Loaded Stylesheets -->';
    foreach ($wp_styles->done as $handle) {
        $style = $wp_styles->registered[$handle] ?? null;
        if ($style) {
            echo "<!-- {$handle}: {$style->src} -->";
        }
    }
});

// CSSファイルが存在するか確認
add_action('admin_notices', function(): void {
    if (!current_user_can('manage_options')) return;

    $css_files = [
        get_stylesheet_directory() . '/style.css',
        get_stylesheet_directory() . '/assets/css/main.css',
    ];

    foreach ($css_files as $file) {
        if (!file_exists($file)) {
            printf(
                '<div class="notice notice-error"><p>CSSファイルが見つかりません: %s</p></div>',
                esc_html($file)
            );
        }
    }
});

注意事項

子テーマの推奨: テーマのCSSを直接編集すると、テーマの更新時に変更が失われます。必ず子テーマを使用するか、追加CSSをwp_enqueue_style()で読み込んでください
!importantの乱用: !importantを多用するとスタイルの管理が困難になります。CSS詳細度を適切に管理することを優先してください
カスタマイザーの追加CSS: 「外観」→「カスタマイズ」→「追加CSS」で入力したCSSは優先度が高く、ほぼすべてのスタイルをオーバーライドできます

まとめ

CSSが反映されない問題の解決手順は「キャッシュのクリア（まず最初に試す）→CSS詳細度の確認→読み込み順序の確認→wp_add_inline_styleの活用→ブラウザの開発者ツールでの確認」です。開発者ツール（F12）のCSSパネルで、どのスタイルが適用されているか・どれが打ち消されているかを確認することが最速の解決方法です。

Post Views: 3