cssを変更して反映されなくて困った時の対策

2014年10月13日stinger3 備忘録cssが反映されない, stinger3, ワードプレスstinger3 備忘録, stinger3, ワードプレス

stinger3

cssを変更して反映されなくて困った時の対策

 

ワードプレスで、ブログのデザインを変更するためにcssを変更

した時、反映されない事ってありますよね

 

この時ってcssの記述に間違いがあったのかな?

子テーマに記述したから反映されないのかな?

と思って最初からやり直したり、悩んでいたりしていませんか?

 

こういう場合、キャッシュが悪さをしている時があります。

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ

したやり方等を忘れないために書き留めた備忘録です。

記事内にソースコードを表記してる箇所は、ダブルクリックすると

ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー

にアップ。または各サーバーのオプション(ファイルマネージ

ャー)等(例はさくらサーバーです)で編集してください。

バックアップは忘れずに!!!

 

変更したcssが反映されない原因

 

1.キャッシュが残ってる場合があります。

 

キャッシュというのは、過去に閲覧した履歴が残っている事で

す。

これは二回目にそのサイトを読み込む時に、速く表示する為に

このような仕組みになっています。

 

なので、CSSを変更してもキャッシュが残ったままだと過去の

閲覧した状態で表示されてしまいます。

 

なのでキャッシュをクリア(消去)する必要があります。

 

2.キャッシュ系のプラグインを使っている

 

ブログをWordPressで構築している場合、キャッシュ系のプラ

グインを入れている人もいると思います。

 

例えば「W3 Total Cache」とか。

通常は高速化に貢献できていいのですが、CSS修正の反映確認

のようなケースのときは邪魔だったりします。

 

なので、プラグインを一時的に無効にする。

確認後に有効に戻すのを忘れずに!

 

3.記述の誤り

 

コードが間違っていたら当然反映されません。へたをしたら真

っ白になります。

但し、親テーマに記述したら反映される事があります。

 

4.ブラウザによって反映されない

 

これはたまに有ります。

今現在私のブログは、IE10とクロームとでは表示が少し違

います。

 

なので現在対策を思案中です。

私が知る限り以上の通りです。

 

 

対 策

 

1.キャッシュの削除

 

キャッシュというのは、過去に閲覧した履歴が残っている事。

これは二回目にそのサイトを読み込む時に、速く表示する為に

このような仕組みです。

 

CSSを変更してもキャッシュが残ったままだと過去の閲覧した

状態で表示されてしまいます。

 

なのでキャッシュをクリア(消去)する必要があります。

 

(1)各ブラウザからキャッシュ削除のやりかた

 

IE(InternetExplorer9)

「ツール」→「閲覧履歴の削除」→「インターネット一時フ

ァイル」→「削除」

 

Firefox

「ツール」→「最近の履歴を削除」→「すべての履歴」→

「キャッシュ」→「今すぐ消去」

 

Chrome

「設定」→「履歴」→「閲覧履歴データの消去」→「閲覧履

歴データを消去する」

 

Safari

「編集」→「キャッシュを空にする」→「空にする」

 

 

(2)スーパーリロード

 

スーパーリロードとは、強制的に優先して再読み込みさせる

方法です。

 

と言っても上記のキャッシュ削除との違いはなくて、すばや

く削除が出来ます。私はこれををメインで使っています。

 

【Windows】

① IE、Chrome、Firefox、opera では

Ctrl+F5キー

② Safari

Ctrl+Rキー

 

【Mac】

① Chrome、Safari、Opera では

Command+Rキー

② Firefox では

Command+Shift+R

これがベストだと思う。

 

2.キャッシュ系のプラグインを使っている場合

 

ブログをWordPressで構築している場合、キャッシュ系のプラグ

インを入れている人も多いと思います。

 

例えば「W3 Total Cache」とか。通常は高速化に貢献できてよい

のですが、今回のようなCSS修正の反映確認のようなケースのと

きは邪魔だったりします。

 

なので、プラグインを一時的に無効にします。

確認後に有効に戻すのを忘れないように。

 

3.記述の誤り

 

これについては、間違いのないように記述する。

子テーマで記述してだめっだたら、ためしに親テーマに記述して

みる。

以外に反映されるかも?

 

4.ブラウザによって反映されない

 

ん・・・・

こればっかりは仕方ないのか?

ブラウザによってコードが使えない

全てがハックできない。ハックしても反映してくれない。

 

対策を考案中で~す。

スミマセン。

 

今現在、「スパーリロード」が一番有効だと思ってます。

 

 

でも実は隠し玉があるんだけど・・・

ブログ大改造前は、この隠し玉を記述していました。

カスタマイズ後それでもたまに反映されない時がありました。

 

このコードを記述したおかげで、無事反映された保証が付いたわけ

では有りません。

それと親テーマの「header.php」に記述するので、個人責任でおす

すめします。

 

 

cssを変更しても反映されなくて困った時の隠し玉

 

親テーマの「header.php」を変更します。

開いたら下記コードを探します。

 

<!—css切り替え—>”のコードを検索すれば、判ると思います。

 

変更前のヘッダー(header.php)の一部

 

 

開いたら下記コードを変更する。

 

 

の記述を

 

 

に変更する。

 

変更後のヘッダー(header.php)の一部

 

 

尚、このコードは

りゅんた 様の

CSSが反映されない?超簡単!コード一行で簡単解決!

 

を参考にして頂きました。

アリガトウございます。

詳細は当ブログをご参照してください。

あとは自己責任で!!!

以上です。