LABO IWASAKI

CSSをスグに反映させる!

CSS変更したのに反映されない

ありますよね、こんな時…。
キャッシュが邪魔してるんだね。再読み込みする?
そんなのいちいちやってられないよね。

自分だけの問題なら別にいいけど…
公開してるサイトなら見てくれてるユーザーがいる。
皆が毎回再読み込みなんてしてくれないもんね。

変更後すぐ反映

Immediately reflect

ちょっとCSSを変更したけどキャッシュが残ってて反映されない。または遅い。
何も知らない人がサイトを訪問した時にデザイン崩れてる可能性もある。
以下に意外と簡単な解決方法を書いておきます。

<link href="../css/index.css?20150514" rel='stylesheet' type='text/css'>

これだけで大丈夫!(クエリで日付をつけた)
「?*****」ってクエリを付けると「キャッシュと違うバージョンがある」と判断してくれる。
僕は毎回面倒なのでPHPを使って以下のようにしています。

<?php
$cy = date("Y");
$cm = date("m");
$cd = date("d");
$ch = date("H");
$cn = date("i");
$cs = date("s");
$cssdays = ''.$cy.''.$cm.''.$cd.''.$ch.''.$cn.''.$cs.'';
?>

<link href="../css/index.css?<?php echo $cssdays; ?>" rel='stylesheet' type='text/css'>

これで自動的に変更したCSSが反映されます。
HTMLでPHPを使う方法は以下に書いておきます。

HTMLでPHPを走らせる

Use the php

「.htaccess」に以下を追記します。

AddHandler application/x-httpd-php .php .html
php_flag allow_url_fopen on
php_flag allow_url_include on

サーバー側の内容によって記述内容が変わる可能性があります。
もしレンタルサーバーを使用している場合は以下のどれかを試してください。
どれか当てはまるはずです。

AddHandler x-httpd-php .html
AddType x-httpd-php .php .html
AddHandler application/x-httpd-php .php .html
AddType application/x-httpd-php .php .html

「fopen」と「include」の設定も必要です。
これは「.htaccess」に書く事もできますし、「php.ini」に書く事もできます。
「php.ini」で設定した場合は「.htaccess」に書かなくても大丈夫です。

.htaccessに書く場合
php_flag allow_url_fopen on
php_flag allow_url_include on

php.iniで設定する場合
allow_url_fopen = On
allow_url_include = On

※ レンタルサーバーの場合、プランによっては上記を利用できない場合があります。