SHIRO DXはビジネスの効率化や
売上UPに繋がるチップスをご紹介しています

WordPressでウェブサイトを構築する際、子テーマを作成してデザインのカスタマイズを行うのは一般的です。

しかし、「子テーマのCSSが反映されない」という問題に悩まされる方も多いのではないでしょうか。

今回の記事では、

• この問題の原因
• 具体的な解決策

を初心者にも分かりやすく解説します。

なぜCSSが反映されないのか？

WordPressで子テーマを作成します。

CSSをカスタマイズしても反映されない原因は、いくつか考えられます。

• 子テーマの構造が間違っている
• style.cssの記述ミス
• 親テーマのCSSとの競合
• キャッシュが残っている
• FTP転送時のトラブル
• パーミッションの問題

具体的な解決策

子テーマの構造を確認する

• style.css: 子テーマのスタイルシートです。必ずこのファイルを作成し、親テーマのスタイルシートを読み込むように記述します。
• functions.php: 子テーマで追加したい機能を記述するファイルです。必ず親テーマのfunctions.phpを読み込むように記述します。
• テンプレートファイル: 必要に応じて、親テーマのテンプレートファイルをコピーしてカスタマイズします。

style.cssの記述ミスをチェックする

• @import文: 親テーマのスタイルシートを読み込む@import文が正しく記述されているか確認します。
• セレクタ: CSSのセレクタが正しく記述されているか確認します。
• プロパティ: CSSのプロパティと値が正しく記述されているか確認します。

親テーマのCSSとの競合を解消する

• !important: どうしても上書きしたい場合は!importantを使うこともできますが、乱用は避けましょう。
• 子セレクタ: 親テーマのセレクタをより詳細な子セレクタで指定することで、上書きすることができます。

キャッシュをクリアする

• ブラウザのキャッシュ: ブラウザのキャッシュをクリアします。
• WordPressのキャッシュ: WordPressのキャッシュプラグインを使用している場合は、キャッシュをクリアします。
• サーバーのキャッシュ: サーバーのキャッシュをクリアします。

FTP転送時のトラブルを確認する

• ファイルのパーミッション: ファイルのパーミッションが適切に設定されているか確認します。
• ファイルの転送ミス: ファイルが正しく転送されているか確認します。

子テーマを再度有効化する

• 子テーマの有効化: 子テーマが正しく有効化されているか確認し、一度無効にして再度有効化してみます。

その他の注意点

ブラウザの開発者ツール

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

CSSの優先順位

CSSの優先順位を理解し、適切な記述を行うことが重要です。

子テーマの更新

子テーマを更新する際は、必ずバックアップを取ってから行いましょう。

WordPressの子テーマのCSSが反映されない原因は様々です。

一つずつ丁寧に原因を特定しましょう。

上記で紹介した解決策を試すことで、問題を解決できるはずです。

もし、それでも解決しない場合は、WordPressのフォーラムや専門のサポートに相談することをおすすめします。

弊社では、他社で制作したWordPressサイトのエラーやバグの対処も行っております。

お気軽にご相談ください。