ｃｓｓを変更して反映されなくて困った時の対策
ワードプレスで、ブログのデザインを変更するためにｃｓｓを変更
した時、反映されない事ってありますよね
この時ってｃｓｓの記述に間違いがあったのかな？
子テーマに記述したから反映されないのかな？
と思って最初からやり直したり、悩んでいたりしていませんか？
こういう場合、キャッシュが悪さをしている時があります。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
変更したｃｓｓが反映されない原因
１．キャッシュが残ってる場合があります。
キャッシュというのは、過去に閲覧した履歴が残っている事で
す。
これは二回目にそのサイトを読み込む時に、速く表示する為に
このような仕組みになっています。
なので、CSSを変更してもキャッシュが残ったままだと過去の
閲覧した状態で表示されてしまいます。
なのでキャッシュをクリア（消去）する必要があります。
２．キャッシュ系のプラグインを使っている
ブログをWordPressで構築している場合、キャッシュ系のプラ
グインを入れている人もいると思います。
例えば「W3 Total Cache」とか。
通常は高速化に貢献できていいのですが、CSS修正の反映確認
のようなケースのときは邪魔だったりします。
なので、プラグインを一時的に無効にする。
確認後に有効に戻すのを忘れずに！
３．記述の誤り
コードが間違っていたら当然反映されません。へたをしたら真
っ白になります。
但し、親テーマに記述したら反映される事があります。
４．ブラウザによって反映されない
これはたまに有ります。
今現在私のブログは、ＩＥ１０とクロームとでは表示が少し違
います。
なので現在対策を思案中です。
私が知る限り以上の通りです。
対 策
１．キャッシュの削除
キャッシュというのは、過去に閲覧した履歴が残っている事。
これは二回目にそのサイトを読み込む時に、速く表示する為に
このような仕組みです。
CSSを変更してもキャッシュが残ったままだと過去の閲覧した
状態で表示されてしまいます。
なのでキャッシュをクリア（消去）する必要があります。
（１）各ブラウザからキャッシュ削除のやりかた
IE（InternetExplorer9）
「ツール」→「閲覧履歴の削除」→「インターネット一時フ
ァイル」→「削除」
Firefox
「ツール」→「最近の履歴を削除」→「すべての履歴」→
「キャッシュ」→「今すぐ消去」
Chrome
「設定」→「履歴」→「閲覧履歴データの消去」→「閲覧履
歴データを消去する」
Safari
「編集」→「キャッシュを空にする」→「空にする」
（２）スーパーリロード
スーパーリロードとは、強制的に優先して再読み込みさせる
方法です。
と言っても上記のキャッシュ削除との違いはなくて、すばや
く削除が出来ます。私はこれををメインで使っています。
【Windows】
① IE、Chrome、Firefox、opera では
Ctrl＋F5キー
② Safari
Ctrl＋Rキー
【Mac】
① Chrome、Safari、Opera では
Command＋Rキー
② Firefox では
Command＋Shift＋R
これがベストだと思う。
２．キャッシュ系のプラグインを使っている場合
ブログをWordPressで構築している場合、キャッシュ系のプラグ
インを入れている人も多いと思います。
例えば「W3 Total Cache」とか。通常は高速化に貢献できてよい
のですが、今回のようなCSS修正の反映確認のようなケースのと
きは邪魔だったりします。
なので、プラグインを一時的に無効にします。
確認後に有効に戻すのを忘れないように。
３．記述の誤り
これについては、間違いのないように記述する。
子テーマで記述してだめっだたら、ためしに親テーマに記述して
みる。
以外に反映されるかも？
４．ブラウザによって反映されない
ん・・・・
こればっかりは仕方ないのか？
ブラウザによってコードが使えない
全てがハックできない。ハックしても反映してくれない。
対策を考案中で～す。
スミマセン。
今現在、「スパーリロード」が一番有効だと思ってます。
でも実は隠し玉があるんだけど・・・
ブログ大改造前は、この隠し玉を記述していました。
カスタマイズ後それでもたまに反映されない時がありました。
このコードを記述したおかげで、無事反映された保証が付いたわけ
では有りません。
それと親テーマの「header.php」に記述するので、個人責任でおす
すめします。
ｃｓｓを変更しても反映されなくて困った時の隠し玉
親テーマの「header.php」を変更します。
開いたら下記コードを探します。
“<!—css切り替え—>”のコードを検索すれば、判ると思います。
変更前のヘッダー(header.php)の一部
[php]
<!—css切り替え—>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo ge
t_template_directory_uri(); ?>/images/webclick.png" />
<meta name="viewport" content="width=device-width,initial-sc
ale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directo
ry_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1,
user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); ?>" type="text/css" media="all"/>
<?php } ?>
<?php wp_head(); ?>
[/php]
開いたら下記コードを変更する。
[php]
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); ?>" type="text/css" media="all"/>
[/php]
の記述を
[php]
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/sty
le.css’); ?>" type="text/css" media="all" />
[/php]
に変更する。
変更後のヘッダー(header.php)の一部
[php]
<!—css切り替え—>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo ge
t_template_directory_uri(); ?>/images/webclick.png" />
<meta name="viewport" content="width=device-width,initial-sc
ale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directo
ry_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1,
user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/sty
le.css’); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
[/php]
尚、このコードは
りゅんた 様の
を参考にして頂きました。
アリガトウございます。
詳細は当ブログをご参照してください。
あとは自己責任で！！！
以上です。
コメント