子テーマCSSファイルの適用の流れと意識すること

親テーマのCSSファイルをインポートして、子テーマCSSファイルを作成したときのサイトへのCSS適用は以下のようになります。

１．インポートした親テーマCSSファイルが子テーマで適用されます。
２．子テーマCSSファイルで設定したプロパティのみ上書き・また適用されます。

【子テーマCSSファイル適用のイメージ図】

CSSファイルで意識すること・注意すること

１．親テーマstyle.cssに同じセレクタ名が、複数の場所で設定されている場合があり。
２．親テーマで設定されているCSSファイルのプロパティと値のチェック。

１．に関しては、親テーマCSSなどのファイルにあるセレクタまたコメントなどをよく見ていく必要があります。

２．に関しては、親テーマstyle.cssを子テーマstyle.cssで変更する場合に、親テーマのセレクタのプロパティの一部を、子テーマstyle.cssで変更した場合、子テーマで設定していない親テーマstyle.cssのプロパティは、そのまま反映されます。

子テーマstyle.cssで、親テーマstyle.cssの要素を再定義する例の記事で記事タイトルの文字の大きさを子テーマstyle.cssファイルで変更していますが、子テーマでプロパティの値を再定義していないセレクタは、そのまま親テーマstyle.cssの設定が反映されています。