Do something different , Do something fun !

人生は遊び。

病院広報部

Google Chrome をバージョンアップしたらCSSが効かなくなったので対応した。

投稿日:

ある日、職場のホームページが壊れてました。デザインが崩れておりました。

WEB管理者は自分一人。前日までにどこも変更していないのに・・なぜ。
専門的に学んで来たわけではなく、このようなトラブルにはめっぽう弱い。焦る。

とは言え、解決に至りましたのでメモとして残しておきます。

 

崩れた状況

職場のホームページはすべてWordpressで作ってあります。トップページはなんともないのですが、どこかをクリックすると中のページはすべて崩れておりました。
文字や色、大きさ、文字の位置、表などがまったく装飾されていない状態で。一目見て

うん壊れてる(T-T)

と認識できる状況でした。

ブラウザによる表示の違い

Google Chromeを普段使っているのですが、こちらで壊れているのを発見したわけですが、試しに Internet Explorer (IE)でも見てみると

こちらは問題なし!(/・ω・)/

 

と、言うことはIEのシェアを考えると半分は大丈夫かな。ちょっと安心!
と思いきや。

Net Applications

 

思ったよりもIEのシェアは低い!
60%はChromeなんですね!
なおさら早く直さねば!

Google Chrome 最新版だと崩れる

周辺のデスクにいる同僚のパソコンを借りて、確認してみると・・
Chrome だけど崩れていない。 バージョンを見てみると最新版ではない。

ダメなバージョンは2017年10月1日現在最新の 61.0.3163.100(Official Build) (32 ビット)
だと分かりました。

さて何がだめなのか。

原因はCSSの読み込み

ソースを比べてみるホームページはだいたい、

・HTMLファイル(構成ファイル)
・CSSファイル(デザイン)
・画像ファイル

で作られてますね。
だから、今回のはデザインがくずれていたのでCSSが読み込めていないのだなと思いました。
ソースをみてると。ちょっと変なところが・・

<link rel="stylesheet" type="text/css" href="ホームページのアドレス/css/common.css?1710123456" />

ってなってました。後ろの方に変な数字がついています。
通常はこんなです。

<link rel="stylesheet" type="text/css" href="ホームページのアドレス/css/common.css" />

どうもここがうまくCSSを読み込めなかった原因のようです。
ようです、とか言ってこの設定をしたのは過去の自分です。

CSSをすぐに反映させる設定が裏目に

CSSファイルを変更しても、キャッシュに過去の情報が残っていると
反映されていないように見えるので

変更の依頼者から「変更されてないんですけど〜(怒)」
なってことはよくあります。

それを回避するために、更新が自動でかかるようにする技を調べて設定していたのでした。

本当は更新された方がよいですが、デザインが崩れるので背に腹は変えられません。
あまり知識がない人間としてはひとまず戻すのが得策ということで戻しました。

WordPressのthemeフォルダにあるheader.php修正します。

<修正前>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); echo '/css/common.css?' . filemtime( get_stylesheet_directory() . '/css/common.css'); ?>

<修正後>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url');?>/css/common.css" />

実際にChromeの最新版で見てみると、よしよし表示は正常になりました。
ひとまずOKです。

そもそもの原因はChromeの対応

正直、難しいことはわかないのですが、とにかくGoogle Chromeを 61.0.3163.100 にしたところ。CSSの読み込みにタイムスタンプをつけることでキャッシュを使わずに最新状態を読みこます。設定をすると、CSSは反映しなくなってしまったよ!
と、いうお話でした。
ちなみにスマホ(iOS)Chromeではこの現象は起きていませんでした。

なんにせよ自力で直せてよかったε-(´∀`*)ホッ

336




336




\ シェアしてください /

-病院広報部

Copyright© 人生は遊び。 , 2017 All Rights Reserved.