アフィーロード

アフィリエイトがあるじゃないか!

*

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を読み込む

  1. 親テーマのheader.phpからstyle.cssを読み込んでいる箇所を削除。
  2. 親テーマの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, テーマ

Message

メールアドレスが公開されることはありません。

  関連記事

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …

STINGER5
STINGER5をWordPressのテーマに選んでみた

WordPressをインストールして、まずやるべきは記事を書くことではなく、ブロ …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることに …

WordPressのログインIDがバレるのをEdit Author Slugで防ぐ

ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …

AddQuicktagプラグインでタグ打ちをとことん手抜きしよう

TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …

ヘッダー画像を広げたブログ幅に調整する【STINGER5】

ブログの一番上に付けるヘッダー画像を変更しました。 だた、そのまま変更したのでは …