せっかく苦労してCSSを編集したのにそれが画面に反映されない！
なぜ？どうして？
と思ったことはありませんか？
苦手なワードプレスの「テーマの編集」の作業をやっと終えたと思ったのに、ちっとも画面に反映されない。
いったいどうして？何が間違ってるの？と思わず声をあげたくなりますよね？
つい最近、私も同じことに陥っていました。
目次
CSSが反映されない！
新テーマの導入
つい1週間ほど前、私はこれまでずっと使っていたテーマを変更しました。
新しく導入したのはおなじみの『STINGER』です。『STINGER8』。（現在は『ストーク』を使っています）
やはり人気のテーマだけあって今まで使っていたものと比べると断然いい。
これでようやく自分のブログも見かけだけはそれらしくなったなと喜んでいたのです。
見出しのカスタマイズ
でもしばらくするとやっぱりちょっといじりたくなってきました。
全体的に白っぽいので見出しに色をつけようと思ったのです。
私は『スティンガー 見出し 変更』で検索をかけ、出てきたサイトを調べてみました。
予想はしていましたが、見出しを変えるにはCSSを変えなくてはならないようでした。ということはあの『テーマの編集』です。
私はいくぶん重い気持ちになりながらも「これをコピペすれば大丈夫！」というコードを言われるとおりにコピペしました。さっさかやって早くこの苦手な画面とはおさらばしたい。
反映されない！
ところがです。
プレビュー画面を見てみると、見出しが変わっていないのです。デフォルトの地味なグレーのまま。
ちゃんとコピペしたのに反映されていません。
「おかしーな？」早くもイヤな予感におそわれながら、私は何度か同じことを試しました。
でも変わりません。
他のサイトに移って違うコードをコピペしてみましたがやはり変化なし。そのあともいろいろなコードを書いたり消したり、消したり書いたり。
でもダメです。
なぜCSSが反映されないのか？
私は次に「スティンガー 見出し 反映されない」と検索をかけ、出てきたサイトを一つ一つ調べていきました(今にして思えばこのキーワードがずれていたのかもしれません)。
が、それらを読めば読むほど、私の頭は泥沼に沈みこんでいきました。
そもそも言葉の意味が分からないのです。
エンキュー？
import？
スタイルタグ？
優先度？
何すか、それ？
分からないことを調べようとしてもさらに分からないことばかり。
別のブログには反映されている？
このあと、さらに不可解なことが起こりました。
このブログとは別に、もう更新もしていない初期の頃のブログがあって、おもに練習用に使っていました。『STINGER8』の導入も最初はこちらで試していました。
ふと、こっちでもやってみようと思って同じ作業(コピペ)をしてみたら、驚いたことにちゃんと反映されるではありませんか！？
見出しが、指定のデザインに変わっているのです！
まったく同じテーマなのに！同じテーマに、同じ作業をしているのに！
何が違うのか
同じテーマを入れ、同じようにCSSを書きかえているのにどうして片方はそれが反映されているのにもう片方はまったく反映されないのか？
不思議でなりません。
もうこの頃には血眼になっていました。私はその血走った眼で、それぞれのブログの相違点を探しました。
CSSは？
まずCSS。
ここまで相当いじくりまわしていましたから、いつのまにかコードを変えてしまっているようなことはいないか。
本ブログの子テーマ、練習ブログの子テーマ。
それから親テーマ。
細かい字を目を皿にして調べましたが、両者変わったところはありません。
プラグインは？
次に目をつけたのはプラグインです。
片方は練習用で更新もしていないのですから、当然使用しているプラグインは違います。
両者の違いはこれくらいしかないと思い、できるだけ同じ状態になるようプラグインをインストールしたり、逆にストップさせたりしました。
そうしてもう一度チャレンジ。
でもダメでした。
あいかわらず見出しはデフォルトのままです。もう泣きたくなりました。
意外な原因
最後の手段。
実は私はあるブログコミュニティに属しています。
これまでも何か分からないことがあるとこちらの管理者の方(タシテクさん)に質問しており、そのたびに的確な答えをいただいていました。
ブラウザのキャッシュ
タシテクさんはすぐにお返事をくれました。そこには意外なことが書かれていました。
スマホでは見える？！
”スマホから見たらきちんと反映されているのでブラウザのキャッシュが原因では？ブラウザのキャッシュクリアをしてみてください”
え…？
スマホから見たら反映されている？
私は大慌てでスマホを開きました。すると、
反映されている！？
なんと、パソコンではこれまで何度やってもダメだったのにスマホではちゃんと反映されているのです！なんということでしょう！
ブラウザのキャッシュ
このことを知らせてもらっただけでも私としては十分にうれしかったのですが、後半の部分も気になりました。
ブラウザのキャッシュ
クリア
実は意味が分かりませんでした。
調べてみるとキャッシュとは、
『ブラウザが表示したウェブページのデータを一時的にコンピュータに保存する機能』
のことで、キャッシュをクリアするとはこの機能を削除することだそうです。そんなこと初めて知りました。
やり方はとても簡単でした。
削除したら…
それからプレビュー画面を出しました。そうしたら――
反映されているぅぅぅ！！！
ちゃんと見出しが変わっているのです。夢にまで見た新しい見出し。
もううれしかったのなんの。天にも昇る気持ちでした。
まさかそんなところに原因があったとは…
同時にコミュニティ管理者の方に感謝しました。ありがとうございます！
CSSが反映されないときはこれ！！
今あらためて「CSS 反映されない」で検索をかけるとたしかに「ブラウザのキャッシュ」という言葉があちこちに出てきます。
あるいは「スティンガー 見出し 反映されない」という最初の検索の仕方がよくなかったのかもしれません。
いずれにしても、
私と同じような『テーマの編集』画面が苦手という方。
HTMLやCSSに拒否反応があるワードプレス初心者の方。
原因は他にもあるかもしれませんが、その場合はわれわれにはなかなか手がつけられません。難しすぎて。
ですからこれだけお伝えします。
CSSが反映されないときに真っ先にやるべきはブラウザのキャッシュクリア！
これなら5分でカタがつきます。私のように5時間もかける必要はありません。
時間が有意義に使えることうけあいです！
参考までにChromeのさらに簡単なキャッシュクリアの方法が出ていました。
Chromeのブラウザキャッシュを簡単に削除する2つの方法+普通の方法
コメントを残す