変化を求める人

子テーマのcssが反映されない。とりあえず2つ問題があった。

      2015/10/21

利用しているテーマはSTINGER5です。

今回の原因

1.子テーマよりも親テーマのスタイルシートが後に読み込まれていた。

2.キャッシュによって最新の更新が反映されていなかった(かも)。

※Xserverでmod_pagespeedをonにするとスタイルシートとかが圧縮されたり、キャッシュされたりする。そのために不具合が発生するのかもしれない

やってみたこと

子テーマのheader.phpで wp_head() を探す。見つけたら、その下で子テーマのスタイルシートを読み込む。

job_programmer-300x300

h2タグには装飾が付いていた

これまで記事中の見出しでは<h2>タグを使っていなかった。いちいち<div>でスタイルを設定していた。
そのため気づかなかったのだが、今更ながらhtmlの書き方的に問題があるんじゃないかな?と思った。

ということで<h2>に置き換える作業を行ってみた。
すると、STINGER5では<h2>タグを使うと次のように吹き出しのような装飾がされていたことに気づく。

下に出っ張りがある

個人的には吹き出しは要らないかなと思ったので、子テーマで上書き(初期化)することにしてみた。

初期状態に戻すには initial を指定すればいいらしいが・・・

親テーマのstyle.cssを見てみると、h2に関する設定を発見。また、h2:beforeとh2:afterというものも設定されている。
この二つの設定で吹き出しを作っている感じなので、この二つを初期状態に戻すことにする。

初期状態に戻すにはプロパティにinitialを指定すればいいらしい。

子テーマのstyle.cssで h2:before、h2:after の設定をそれぞれ初期化。そして確認。変化なし
ん?指定を間違えたかな? 他のタグはどうだろう。<p>を上書きしてみる。変化なし。

適当なclass名を指定すると利用できることから、子テーマのstyle.cssは読み込んでいるはず。上書きに失敗しているらしい。

よく見ると親テーマで上書きされている?

ブラウザ上でページのソースを確認する。すると、親テーマ(のスタイルシート)の方が子テーマ(のスタイルシート)よりも後に読み込まれているように見える。

header.phpファイルを見ると親テーマ(のスタイルシート)の読み込みは wp_head() の内部で行っているようだ。そこで、子テーマ(のスタイルシート)の呼び出しを wp_head() の下に配置した。

その後確認すると、子テーマでの上書きが成功していたのでひとまずこれで上書きはされるようになった。

でも、そもそもWordPressの仕様的に、子テーマは親の後に勝手に読み込んでくれるんじゃないの?
まだまだよくわからない。

追記、この問題はwp_head()が「親テーマのスタイルシート」を読み込んでいることにより起きたものっぽい。この問題を回避するには、「子テーマのスタイルシート」をwp_head()呼び出しの後に読み込むこと。

もしかしたら、mod_pagespeedをonにしたから?

調べていると、Xsever の mod_pagespeed を on に設定していると、スタイルシートなどを圧縮し、またキャッシュにするなどの処理をするらしい。

wp_head()内で読み込んでいるスタイルシートは、その圧縮、キャッシュされたもののようだ。

もしかしたら、そのキャッシュに子テーマの設定がまだ反映されていないだけなのかもしれないが、どうなのだろう?

また、normalize.cssとかを<head>の上部で読み込んでいたのだが、もしかしたら圧縮分も合わせると2回読み込んでいる?
header.phpでnormalize.cssの読み込み部分を削除しても、違いがよくわからない。
PageSpeedInsightsでたまにnormalize.cssの読み込みをどうにかしろと言われるので削除したままで問題ないならそのままにしておこうと思う。

まあ、素人考えなので全くの見当違いかもしれないけど。詳しい人教えてください。

追記

<p>タグに字下げ(text-indent:1em)を指定してみたけど、記事以外の部分でも無駄な空白が出来てしまう。本文用にわざわざクラス指定するのは面倒臭そうなので、結局外した。まあ空白をその都度入れればいいだけだし。

個人的には字下げはあった方がいいかなと思うが、web上ではあまり字下げしないっぽいのでしばらくは字下げせずに様子を見る。

 - WordPress ,

  関連記事

このブログにも「はてブ」ボタンが付いていたのに、今になってはじめて、はてなブックマークを始めた。

このブログにも、ソーシャルボタンはついている。Google+、Facebook、 …

Crayon Syntax Highlighterをブログに適用してみた。デフォルト設定だとちょっと問題があったので変更を加えた

Crayon Syntax Highlighterとは [crayon& …

[STINGER5]関連記事のカスタマイズ。取得条件を変更し表示内容を変更する

今まで気が付かなかったのですが、STINGER5のデフォルト設定の場合、関連記事 …

プレビューを頻繁に表示する場合、アドセンスは非表示にしたほうがいいかも

今日のアドセンスの表示回数がアナリティクスのデータと比べるとやけに多い。 記事の …

カテゴリやアーカイブの一覧をクリックで開閉するように変更してみた。

このサイトをスマホで見たときに少し縦長になっている気がする。 ということで、一番 …

スポンサーリンク

  週間人気記事

Comment

  1. […] ※当ブログを参考にさせていただきました。 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です