CSSを変更したのにサイトデザインが変わらない時の対処方法

スポンサーリンク

CSSを変更したのにサイトデザインが変わらない時の対処方法

 

 

サイトのデザインを変更したい!

そんな時は、どうしますか?

 

WordPressであれば、「テーマ」を変更すればデザインを簡単に変えることができます。

しかしながら、なかなか自分の思い通りのデザインにならないことはしばしばあります。

 

そんな時は、「CSS」を直接変更・追加することでデザインを自分好みに変更することができます。

でも、「せっかくCSSをいじったのにデザインが変わらない!」ということも起きてしまいます。

そんなときの対処方法をご紹介します。

 

スポンサーリンク

CSSを変更してもデザインが変わらない時の対処方法

 

サイトのデザインを変更する際に「CSS」を変更したのに、デザインが変わらない時の対処方法です。

 

キャッシュクリア(スーパーリロード)する

 

キャッシュクリア(スーパーリロード)する

 

大体の原因は、この「キャッシュ」が原因です。

 

キャッシュとは?

コンピュータにおいて、重複するデータ転送を、バッファを使って短絡し、省力化効率化することで高速化などを図る機構

引用:キャッシューWikipedia

とのことです。

 

…よくわかりませんねw

 

つまりは、重複するデータ転送を行う際にあらかじめどこかしらに保持しておき、再度同じ処理を行う際に高速な処理を行う技術です。

今回のサイトのようなWebページの場合は、一度訪問したサイトの画像や文書などのファイルデータをWebブラウザ(Chrome・IEとか)に保持しておき、二度目の訪問以降は表示速度を高速化する技術です。

 

この「キャッシュ」が、変更前のCSSのデータを保持しているせいでデザインの変更が反映されない場合があります。

※ほとんどの場合はこれが原因ですね。

 

ですので、キャッシュを一度クリア(消す)ことでデザインの変更を反映することができます。

 

キャッシュクリア(スーパーリロード)のやり方

 

キャッシュクリア(スーパーリロード)」はとても簡単に行うことができます。

 

Webブラウザで更新を行う際に、Windowsでは「F5キー」を押すことで、更新を行うことができますが、それだとキャッシュは保持されたままです。

 

キャッシュクリアするためには、「Ctrl + F5キー」で「スーパーリロード」というキャッシュクリアも行う更新ができます。

ちなみに、Macでは「command + shift + r」で行えます。

 

CSSを変更してデザインを確認する際は、毎回「キャッシュクリア(スーパーリロード)」を行うようにしましょう。

 

親テーマのCSSに打ち消されている

 

親テーマのCSSに打ち消されている

 

WordPressを利用している場合は、CSSを記述するときは「子テーマ」を利用します。

(※「子テーマ」を利用しないと、テーマの更新が入るたびにデザインがデフォルトに戻ってしまいます。)

 

子テーマ」のCSSは、最初は何も記述されていないことが多いですが「親テーマ」よりCSSを引っ張り出してきて適応します。

そんな時、CSSの要素の指定(class、idなど)の優先度が子テーマよりも親テーマが高い場合に子テーマに指定したCSSが無視されてしまいます。

 

親テーマのCSSに打ち消されているときの対処方法

 

対処方法は、CSSの優先度を親テーマより子テーマを優先させることです。

 

優先度は、「id」や「class」、「タグ」の指定方法により変わってきますので少々面倒くさいです。

 

そんな時に便利なのが!importantです。

この「!important」は、CSSに付属させることで「優先度に関係なく」優先的に適応されます。

 

使い方はいたって簡単です。

このように書いたCSSに追加するだけです。

 

その他

 

  • HTML・CSSの文法が間違っている。
  • id・classの指定が間違っている。
  • 指定したCSSにWebブラウザに対応していない。(特にIEの古いバージョン)

などなど…

まとめ

 

サイトのデザインを変更しようと「CSS」を変更したのにデザインが変わらない

 

そんな時はいくつか原因がありますが、とりあえず「キャッシュクリア(スーパーリロード)」をしてみましょう。

それでもダメな場合は、HTML・CSSを見直してみましょう。

コメント