STINGER5の子テーマでCSSが上手く反映されない原因を解決！

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、なぜか全く反映されません。オリジナルのCSSはちゃんと反映されているので、親テーマのスタイルを上書き出来ないだけみたいです。

これでは、ブログデザインをカスタマイズ出来ないので何とかしないと。

解決策その1 – カスタマイザーの削除

カスタマイザーの設定が優先されるようなので、親テーマのfunctions.phpの最後の方にある下記のコードを削除しました。念のためテキストなどにバックアップを取ります。

解決策その2 – レスポンシブの分岐コード

カスタマイザーを削除しても反映されないようなので、さらに調べてみると、親テーマのstyle.cssの最後の方にあるレスポンシブに関係する分岐コードを編集する必要がありそうです。

解決策その３ – mod_pagespeed設定の無効化

これでも反映されないので、ブログのソースコードをチェックした所・・・？

何と子テーマの方が先に読み込まれていましたorz

コードの”A.style.css.pagespeed.cf.V1LuAovjkY.css”の部分は何でしょう？通常は、”style.css”のはずなのですが、特にpagespeedの所が気になります。

ページスピードと聞いて、ぱっと思いつくのはキャッシュの最適化ですかね。キャッシュ系のプラグインは入れてないので、他に思い当たるのはエックスサーバーの設定でしょうか。どうも、mod_pagespeedというキャッシュ技術と関係ありそうです。

mod_pagespeedとは、Google社が開発した拡張モジュールでWebサイトの表示速度を向上させる機能です。詳しくはこちらで、mod_pagespeed設定について

要は、CSSの一部をHTMLファイルに直接記述したり、CSSファイルの内容をまとめて最適化し、キャッシュに長期間保存する事でファイルの呼び出しを減らし表示を高速化すると言う技術です。確かにCSSを編集してからブログを表示しても、すぐには反映されなかったような・・・。

画像の表示が劣化する事もあるようなので、mod_pagespeedをOFFにしてみました。エックスサーバーのサーバーパネルから設定できます。

しかし、これでも親テーマのスタイルシートが最後に読み込まれていました。そして、もう1つのCSSファイルが・・・。

“normalize.css”この部分が気になったので調べてみました。

normalize.cssとは、スタイルの初期化に全称セレクタ（*）を使用せず、共通化したデザインで行おうというものです。

これ自体は子テーマより先に読み込まれているので問題ないのですが、読み込まれるstyle.cssが増えた事もあって、style.cssがどのように読み込まれているのか調べているうちに原因が判明しました。

解決策その４ – @import url()を使えばよかった

結論から言うと、STINGER5はfunctions.phpでstyle.cssを読み込んでいなかった。実際には、header.phpでstyle.cssを読み込んでいるため、子テーマより後になっていた訳です。

対応方法１ – 親テーマのfunctions.phpでstyle.cssを読み込む

1. 親テーマのheader.phpからstyle.cssを読み込んでいる箇所を削除。
2. 親テーマのfunctions.phpでwp_enqueue_style()関数を使ってstyle.cssを読み込む。

この方法だと、親テーマを弄るので避けたいです。

対応方法２ – 子テーマのstyle.cssで親テーマのstyle.cssを読み込む

こちらは以前に使われていた方法です。

子テーマのstyle.cssに下記を記入します。

@import url(‘../stinger5ver20141227/style.css’);で親テーマのstyle.cssを読み込んでいる所がポイントです。

また、子テーマのfunctions.phpは必要ないので、コードを削除するかファイル自体を削除します。

これで無事に子テーマの内容がデザインに反映されました。

※ブラウザのキャッシュが更新されずスタイルが反映されない場合があります。Ctrl＋F5でキャッシュをクリアしてください。

まとめ

STINGER5などstyle.cssをfunctions.phpで読み込んでいない場合は、@import url()を使用する方法が良い。

やっとカスタマイズ出来ます。