STINGER5の子テーマでCSSが上手く反映されない原因を解決!
2015/08/29
子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、なぜか全く反映されません。オリジナルのCSSはちゃんと反映されているので、親テーマのスタイルを上書き出来ないだけみたいです。
これでは、ブログデザインをカスタマイズ出来ないので何とかしないと。
目次
解決策その1 – カスタマイザーの削除
カスタマイザーの設定が優先されるようなので、親テーマのfunctions.phpの最後の方にある下記のコードを削除しました。念のためテキストなどにバックアップを取ります。
//テーマカスタマイザーで編集しない方は削除して下さい(ここから)
//カスタマイザーで色を設定しない方は削除して下さい(ここまで)
解決策その2 – レスポンシブの分岐コード
カスタマイザーを削除しても反映されないようなので、さらに調べてみると、親テーマのstyle.cssの最後の方にあるレスポンシブに関係する分岐コードを編集する必要がありそうです。
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {
横幅が最大サイズ780px用のコード
}
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (min-width: 380px) {
横幅が最小サイズ380px用のコード
}
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
横幅が最小780px用のコード
}
解決策その3 – mod_pagespeed設定の無効化
これでも反映されないので、ブログのソースコードをチェックした所・・・?
12 <link rel=”stylesheet” href=”//affiroad.com/wp-content/themes/stinger5-child/A.style.css.pagespeed.cf.V1LuAovjkY.css” type=”text/css” media=”screen”/>
35 <link rel=’stylesheet’ id=’parent-style-css’ href=’//affiroad.com/wp-content/themes/stinger5ver20141227/A.style.css,qver=4.2.2.pagespeed.cf.7M2ug5ZLUd.css’ type=’text/css’ media=’all’/>
何と子テーマの方が先に読み込まれていました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ファイルが・・・。
11 <link rel=”stylesheet” href=”//affiroad.com/wp-content/themes/stinger5ver20141227/css/normalize.css“>
12 <link rel=”stylesheet” href=”//affiroad.com/wp-content/themes/stinger5-child/style.css” type=”text/css” media=”screen” />
51 <link rel=’stylesheet’ id=’parent-style-css’ href=’//affiroad.com/wp-content/themes/stinger5ver20141227/style.css?ver=4.2.2′ type=’text/css’ media=’all’ />
“normalize.css”この部分が気になったので調べてみました。
normalize.cssとは、スタイルの初期化に全称セレクタ(*)を使用せず、共通化したデザインで行おうというものです。
これ自体は子テーマより先に読み込まれているので問題ないのですが、読み込まれるstyle.cssが増えた事もあって、style.cssがどのように読み込まれているのか調べているうちに原因が判明しました。
解決策その4 – @import url()を使えばよかった
結論から言うと、STINGER5はfunctions.phpでstyle.cssを読み込んでいなかった。実際には、header.phpでstyle.cssを読み込んでいるため、子テーマより後になっていた訳です。
対応方法1 – 親テーマのfunctions.phpでstyle.cssを読み込む
- 親テーマのheader.phpからstyle.cssを読み込んでいる箇所を削除。
- 親テーマのfunctions.phpでwp_enqueue_style()関数を使ってstyle.cssを読み込む。
この方法だと、親テーマを弄るので避けたいです。
対応方法2 – 子テーマのstyle.cssで親テーマのstyle.cssを読み込む
こちらは以前に使われていた方法です。
子テーマのstyle.cssに下記を記入します。
Theme Name: stinger5-child
Template: stinger5ver20141227
*/
@import url(‘../stinger5ver20141227/style.css’);
@import url(‘../stinger5ver20141227/style.css’);で親テーマのstyle.cssを読み込んでいる所がポイントです。
また、子テーマのfunctions.phpは必要ないので、コードを削除するかファイル自体を削除します。
これで無事に子テーマの内容がデザインに反映されました。
※ブラウザのキャッシュが更新されずスタイルが反映されない場合があります。Ctrl+F5でキャッシュをクリアしてください。
まとめ
STINGER5などstyle.cssをfunctions.phpで読み込んでいない場合は、@import url()を使用する方法が良い。
やっとカスタマイズ出来ます。
関連記事
-
WordPressで定番のメールフォーム用プラグイン「Contact Form 7」を導入する
ブログには、お問い合わせ用のメールフォームが必須ですよね。 記事の内容に関する問 …
-
リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」
記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …
-
ヘッダー画像を広げたブログ幅に調整する【STINGER5】
ブログの一番上に付けるヘッダー画像を変更しました。 だた、そのまま変更したのでは …
-
Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!
解析ツールの定番Google Analytics(アナリティクス)を導入するとき …
-
Akismetでスパムコメントをフィルタリングする
我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …
-
アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!
記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …
-
TinyMCE Advancedを導入してブログ記事の作成を捗らせよう
ビジュアルエディタは楽で良いですね。 テキストエディタだと、コードとテキストがご …
-
AddQuicktagプラグインでタグ打ちをとことん手抜きしよう
TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …
-
Google ChromeでWPの管理画面が崩れた時の対処方法
みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …
-
変更不可能なWordPressのログインIDを変えてセキュリティアップする方法
ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …