Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › cssが反映されない。
-
投稿者投稿
-
-
2015年9月23日 3:07 PM #32789
kojidai
ゲスト今までは何の問題もなかったのですが、
cssをいじっても、PC上でなにも反映されなくなりました。(スマホではきちんと反映されています)
どういった原因が考えられるでしょうか? -
2015年9月23日 3:18 PM #32790
yokudekiru
ゲストいろいろ考えられますが、キャッシュの影響が考えられます。
クロームで言うシークレットタブで確認してみてください。 -
2015年9月23日 4:58 PM #32791
Hidekichi
ゲスト今までいじってた部分がアップデートなどでインラインで書き出されるようになったんじゃないですかね?
確認方法としては、chrome、firefoxなどのモダンブラウザでF12よりデベロッパーツールを開くか、あるいは該当箇所で右クリックして「要素を調査」みたいのからデベロッパーツールを開きます。
デベロッパーツールが開くと左側にhtml、右側に現在選択しているセレクタのプロパティが表示されます。
デベロッパーツールで現在選ばれている要素が調べたい要素かを確認して、もし違う場合は、左側htmlより要素をクリックして正しいセレクタを選択し直します。
要素が選択されたら、右側のプロパティの表示されている部分でセレクタが表示されている右側辺りに読み込んでいるファイル名が表示されていると思います。たいていはstyle.cssとかです。で、そこに「インライン」と書かれている場合はhtml内に書き込まれています。
style.cssやその他の名称が出ている場合はマウスオーバーでファイルのパスが表示されますから、該当ファイルでcss自体が問題ないか調べます。
インラインで書き込まれている場合はstyle.cssでは100%上書きできません。
理由としては、htmlのheadタグを見てみて下さい。
通常style.cssはheadタグ内の上の方に書かれています。外部cssファイルはとにかく真っ先に読み込んでページをスタイルするために準備をさせておく必要があるからです。
色々なcssが順番に読み込まれ、インラインで書かれている部分はたいていheadタグの下の方、つまりは閉じheadタグ付近にstyleタグとして書かれているはずです。cssは読み込みが後の方ほど優先されます。真っ先に読み込んだstyle.cssはheadタグ内にあるstyleタグで上書きされ出力されるので、どれだけstyle.cssやmobile.cssをいじくったとしても、全部styleタグ内のcssで上書きされます。
まぁインラインで書かれているとしたらですけどね(笑)
インラインを何とかするには、カスタマイザーあたりで出力しているcssの内容を変更するか、元のstyle.cssに書かれているプロパティに!importantをつける必要があります。
!importantはカスタマイズするにあたり、ちょっと避けたいと言う場合は、jQueryでstyleタグよりも後にそのstyleタグを上書きするようなスタイルを読み込ませる必要があります。これは例えば、色だけ変えたいとか、サイズを少しだけ調整したいとかと言う極短いものであればそれで良いかと思います。
しかし巨大な、いわゆるページの細部に渡るぐらいの変更が必要な場合はこれだとあまりオススメできません。
どの部分にどれぐらいのスタイルを、どんな感じでするのかによって答えは変わると思うので、ひとまずは上記を参考に、どの部分(ファイルかインラインか等)に書かれているのかをまず把握して、対応を調べていく必要があります。
-
2015年9月23日 5:47 PM #32792
kojidai
ゲストお二方ともありがとうございました。
キャッシュ削除をしましたら無事解決いたしました。
先日サイトのスピードを上げるために、ここのサイトで紹介されていたものをコピペしましたが
それが影響しているのでしょうか。キャッシュの設定がどうのと書いてありましたので。
どちらにしても解決してよかったです。ありがとうございました。
インラインの文字はありませんでした。 -
2015年9月25日 5:17 PM #32810
わいひらキーマスター先日サイトのスピードを上げるために、ここのサイトで紹介されていたものをコピペしましたが
それが影響しているのでしょうか。ブラウザキャッシュとは、そういう機能です。
以下にも一応書いてあります。
コピペ一発でSimplicityを結構高速化する方法
詳しくは以下を参照してください。
キャッシュとはなんですか? / ファイル転送について / よくある質問集 / サポート – レンタルサーバーならロリポップ!
-
-
投稿者投稿
- トピック「cssが反映されない。」には新しい返信をつけることはできません。