あれ、反応ないぞ？原因2つ！質問はコレを試してからにして。CSS編集点をあっさり適応させる方法

今までCSSは触るのが怖くて、いじっていなかったのですが、どうしても強調する線を、ガイナーレ色（梨色）にしたかったので、とうとういじってみました。

その際、編集したはずの変更点に変化がなく、何が何やらでした。

今回はそれについて、原因と結果、解決策を紹介します。

まず結果

現状、CSSを編集し、以下で説明する事を行えば、すぐに適応されています。

死語ですが、ばっちぐー（←ちゃんとCSSでいじったガイナーレ色になっています。）です。

原因

私が困惑した原因は大きく2つありました。

【原因その１】ブラウザのキャッシュ

“ブラウザ　キャッシュとは“で検索すると

「キャッシュ」とは、ブラウザなどが表示したウェブページのデータを一時的にコンピューターに保存する機能です。

次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できます。

出典：オリックス銀行ホーム

と出てきました。何でオリックス銀行さんが、キャッシュについて説明しているのか？ユーザーさんに、さぞ困っていらっしゃるのでしょう…

結局分かりにくいので、”スナップショット”で例え、ブラウザのキャッシュについて説明します。

私たちは、後で見直したいページや、メールクーポン、などなどスナップショットでその画面を保存することがあります。

スナップショットで保存した内容は、オフラインでも、素早く表示され、便利です。でも、が、時の流れで情報は古くなります。その情報を使う限り、情報は更新されません。

ブラウザのキャッシュも同じようなものです。同じページを開く際、端末に保存された情報を利用して、速く表示させているんです。

でもこの便利機能が、何かを更新した時、ここではCSSを編集した時に邪魔をします。

【原因その２】スタイルシート（simplicity2の子テーマ）

私はsimplicity2というテーマのCSS編集用の子テーマを利用しています。

CSS編集に疎い私は、スタイルシートが複数ある事を知りませんでした。

• スタイルシート
• モバイル用のスタイルシート
• レスポンシブデザインのスタイルシート
• ビジュアルエディター用のスタイルシート

私はレスポンシブデザインをオンにしているのにレスポンシブデザインのスタイルシートを編集していたなかったことが、原因でした。

どうやら編集したつもりになっていたようです。

解決策

該当するスタイルシートを編集する（simplicity2の子テーマ）

①外観　→テーマの編集

②該当するスタイルシートを編集しましょう。

ブラウザのキャッシュを消す（chromeブラウザPC編）

ブラウザをchromeを利用している方はClear Cacheが便利です。

使い方は簡単、Clear Cacheに行って、”chromeに追加”後は、

ブラウザの右上のアプリボタン（リサイクルマーク）を右クリックし、出てきた画面の“Cache”のボックスにチェックを入れましょう。

準備はこれでおしまい。以降、キャッシュを消したい時にブラウザ右上のアプリボタンをクリックしましょう。それだけでキャッシュを削除することができます。

ブラウザのキャッシュを消す（chromeブラウザスマホ編）

①設定

②プライバシー

③閲覧履歴データを消去する

④キャッシュされた画像とファイル　→データを消去

それぞれのデバイスで、キャッシュを削除して、適応されているか確認しましょう。

誰かの時短に貢献できればと思います。