CocoonテーマでCSSの変更が反映されない場合の対処法

WordPressのCocoonテーマでカスタムCSSを適用しても、変更が反映されない場合があります。

これは、キャッシュやCSSの指定方法、他の設定が原因であることが多いです。

この記事では、CSSが反映されないときの一般的な原因とその対処法を解説します。

方法
まとめ

方法

ここから、CSSの変更が反映されない場合の対象方を８つ紹介します。

1. ブラウザのキャッシュをクリアする

ブラウザが古いCSSファイルをキャッシュしている場合、CSSの変更が反映されないことがあります。

まず、ブラウザのキャッシュをクリアして、最新のスタイルシートを読み込むようにしましょう。

手順（Google Chrome の場合）

右上のメニュー（3点アイコン）をクリックして、「設定」→「プライバシーとセキュリティ」→「閲覧履歴データの削除」を選択します。
「キャッシュされた画像とファイル」を選択して「データを削除」をクリックします。

2. WordPressのキャッシュプラグインを確認する

キャッシュプラグイン（「W3 Total Cache」や「WP Super Cache」など）が有効になっていると、キャッシュが原因でCSSの変更が反映されないことがあります。

プラグインでキャッシュを削除して、変更を反映させましょう。

手順:

WordPress管理画面でキャッシュプラグインの設定ページに移動します。
「キャッシュのクリア」 ボタンがあればクリックしてキャッシュを削除します。
変更が反映されるか確認します。

3. Cocoon設定のキャッシュをクリアする

Cocoonテーマにもキャッシュ機能があるため、これが原因でCSSが反映されないことがあります。

手順:

WordPressダッシュボードにログイン。
Cocoon設定 → 「キャッシュ」タブをクリックします。
「キャッシュの削除」ボタンをクリックしてキャッシュをクリアします。

4. CSSの優先度を確認する

CSSの優先順位によっては、他のスタイルシートがあなたのカスタムCSSよりも優先されている場合があります。

このような場合、CSSに「!important」を付け加えることで強制的に適用させることができます。

例:

.example-class {
    color: red !important;
}

ただし、!important はなるべく最終手段として使うべきです。

どのCSSが優先されているかをブラウザの開発者ツールで確認することをお勧めします。

5. カスタムCSSの適用場所を確認する

Cocoonテーマでは、カスタムCSSを適用する場所がいくつかあります。

これが原因で変更が反映されていない場合もあるので、適切な場所にCSSを記述しているか確認してください。

カスタムCSSの追加場所:

WordPressカスタマイザー：
- 「外観」→「カスタマイズ」→「追加CSS」にカスタムCSSを追加します。
Cocoon設定：
- 「Cocoon設定」→「スキン」→「カスタムCSS」に追加します。
テーマの style.css に直接追加：
- テーマファイルを編集して style.css にカスタムCSSを追加する方法もあります。
  ただし、この場合、テーマを更新すると変更が上書きされる可能性があるため、子テーマを使用することが推奨されます。

6. CSSファイルが正しく読み込まれているか確認する

ブラウザの開発者ツールを使って、カスタムCSSが正しく読み込まれているか確認します。

手順:

Google Chrome の場合、対象ページで右クリックして「検証」を選択し、開発者ツールを開きます。
「Elements」タブで、CSSが適用されていない要素を探し、どのCSSが適用されているか確認します。
「Sources」タブで、指定したCSSファイルが正しく読み込まれているか確認します。

7. テーマやプラグインの競合を確認する

他のプラグインやテーマがCocoonテーマのCSSと競合している可能性があります。

特定のプラグインや設定が原因でCSSが上書きされることがあるため、プラグインを一時的に無効化して問題が解決するか確認しましょう。

手順:

WordPressダッシュボード → 「プラグイン」 → 「インストール済みプラグイン」に移動します。
プラグインを一時的に無効化して、CSSが正しく反映されるか確認します。

8. CSSのバージョンを更新する（キャッシュバスティング）

CSSファイルがキャッシュされていて、変更が反映されないことがあります。

これを回避するために、CSSファイルにバージョン番号を追加することで、最新のCSSが読み込まれるようにすることができます。

手順:

functions.php に以下のコードを追加します。

これにより、CSSファイルが変更されるたびにバージョンが更新されます。

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'cocoon-style', get_template_directory_uri() . '/style.css', array(), filemtime(get_template_directory() . '/style.css') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );