ブログ

【WordPress】CSSが反映されない時の確認ポイントと解決方法―原因はキャッシュにある

こんにちは!テンパです。

WordPressでCSSを使ってデザインを変更する場合、「スタイルシート」もしくは「追加CSS」にCSSを追加します。個人的には「追加CSS」が便利です。

また、追加したCSSを使いたい場合は、それを呼び出すコードを入力するだけで、そのCSSを簡単に使うことができます。

【WordPress】簡単!CSSをスタイルシートに追加して、デザインを変更する方法WordPressでブログを作り始めると、使い方や用語などわからないことだらけです。その中でも、ブログのデザインを変えるために必要になってくる「CSS」や「スタイルシート」。ブログ初心者には何がなんだかさっぱりです。そこで今回はCSSをスタイルシートに簡単に追加する方法を紹介します。自分のブログをおしゃれにする第一歩です!...

しかし、CSSを追加後にプレビューを見ても、CSSが反映されていないことがあります。

原因がCSSの入力ミスなら訂正すればすぐに直りますが、CSSは正しいのに正常に反映されない・・・原因がわからないことがあります。

そこで今回は、CSSが反映されない時の確認ポイントと解決方法についてまとめました。

CSSが正しく表示されない時の3つの手順!

CSSを追加後、正しく表示されない場合は3つ原因が考えられます。

  1. CSSが正しく入力されていない。
  2. CSS訂正前のキャッシュが読み込まれている。
  3. 他の追加CSSが邪魔をしている。
テンパ
テンパ
この原因について、順番に解決していくことで追加したCSSが正常に表示されるようになるかと思います。

 

追加したCSSの入力が正しいことを確認する

追加したCSSが正しく表示されない原因の1番がこれになります。

CSSの入力内容に問題がある場合は、もちろん正しく表示されません。1番最初に追加CSSに問題がないかを必ず確認しましょう。問題がある場合は、その部分を訂正すればすぐに解決します。

しかし、WordPress初心者だとCSSに詳しくないことが多く、ネットでCSSのデザインコードがたくさん公開されているので、もっぱらコピー&ペーストして使っている方もいるかと思います。

チー
チー
どの部分に問題あるかわからない!

そのような時は、WordPress「追加CSS」画面のエラーマークがないかを確認しましょう。

エラーマーク・・・CSSに不正がある場合に表示されます。よくあるのが、コピーしたCSSが中途半端で「{」を1つ足りないなどです。

注意マーク・・・CSSに問題があり、正しく表示されない場合があります。サイズなどの数値が大きすぎると付きます。

 

キャッシュを消して再読み込みする

追加したCSSに問題がないことを確認後も、CSSが反映されない場合はキャッシュを削除してみましょう。

キャッシュとは、一度閲覧したことのあるWebページのデータを一時的に保持しておいて、次回アクセス時により早く読み込むことができる機能のことです。

CSS追加後に訂正などをすると、ブラウザが訂正前のキャッシュを読み込んでしまい、訂正後の正しいCSSが反映されません。

この現象は自分のPC中だけで起こっており、サーバーのデータ自体は更新されているので、違うPCでサイトを開くとしっかりとデータは反映されています。

Google Chromeでのキャッシュの消し方

Google Chromeを開き、画面右上の「…」でメニューを開き、「履歴」→「履歴」→「閲覧履歴データの削除」とクリックします。

 

「閲覧履歴データの削除」画面で、「キャッシュされた画像とファイル」にチェックを付けて「データを削除」をクリックすると、キャッシュが削除されます。

 

CSSの優先順位を確認する

CSSが正しく入力されており、かつキャッシュを削除しても反映されない場合は、他のCSSが追加したCSSを邪魔している可能性があります。

CSSには優先順位があり「追加CSS」でCSSを追加する際、より下に記入したものが優先して反映されます。

そのため、1番上や中段にCSSを追加してしまうと、他のCSSに打ち消されてしまうことがあります。

優先したいCSSは必ず1番下に追加しましょう。

CSSを整理してスッキリ表示

ネットで公開されているCSSをコピー&ペーストしている方がなりがちなのは、整理をせずにどんどんCSSを追加していくため、不要なCSSが残っているケースです。

「追加CSS」内がごちゃごちゃしすぎて、「どっからどこまでが新しくCSS?」とわからなくなり、CSSが崩れてしまうこともあります。

しっかりメンテナンスもするようにしましょう。

コード整理でスッキリ!HTMLやCSS内に非表示タグを使ってコメントを入れる方法WordPressを使ってWebサイトを作成してカスタマイズしていく中で「これは何のCSSコードだっけ?」とか、「このdivはどこのだ?」とかって思うことありますよね。そんな時はコメントを入れて整理整頓しましょう!入力したコメントや説明をブラウザ上に表示させないようにする方法があります。...

 

まとめ

いかがだったでしょうか?

CSSを追加しても反映されない場合は、

  1. CSSが正しく入力されているか確認
  2. キャッシュを削除して再読み込み
  3. CSSの優性順位が正しいか確認

以上の手順を踏むことで大体が解決できるかと思います。

参考になれば幸いです。

«ブログで広告収入を得るならここに登録!»

ブログ収入を得るにはサイト内にアフィリエイト広告を載せることです。広告を取得するためにまずアフィリエイトサイト(ASP)へ登録しよう。おすすめはこの2社!

A8.net    

もしもアフィリエイト   

こんな記事もおすすめ