CSSを更新した時に必ず最新のCSSを読み込ませる方法
access_time
ホームページを更新する際にHTMLと一緒にCSSを更新してアップする作業はよくあると思います。その際にキャッシュが影響しているせいでCSSの更新が反映されずにイライラする事ってありませんか？
ブラウザにはキャッシュ機能があって素早く読み込ませるためにCSS等のファイルを保存しておくという事がわかっていれば、CTRL+F5キーで最新版を読み込ませればOK！となるのですが、モバイル版は実機で確認する場合いちいちキャッシュデータを削除して確認するなど色々と面倒です。
それと、お客様からある「ページが崩れてるんだけど」という問い合わせの対応…毎回再読み込みの方法をお伝えしたりします。
というわけで時短のためにメモしておきます。
WordPress対応のサイトの場合
ワードプレスの場合はphpが使えますしテンプレートを読み込ませるコードもありますので、HTMLのCSSを読み込ませる部分の最後にクエリを一文追加するのと、読み込ませるためのテンプレートを用意するだけなのでお手軽です。
用意するもの
update.php というファイルを用意して中身はこんな感じにしておきます。
201912171行だけのphpテンプレートファイルです。数字は適当ですが、私は日付を入力したりしています。ちなみにファイル名は主要なテンプレートファイルの名前とかぶらなければ何でも良いです。
用意したらテーマファイル内に配置します。
CSSの読み込み部分に細工する
通常以下の様になっていると思います。
<link rel="stylesheet" type="text/css" href="<?php echo get_theme_file_uri(); ?>/css/style.css">最後の.cssの後ろに ?<?php get_template_part('update'); ?>
と追記してテンプレートファイルを読み込んでクエリを作れるようにします。
<link rel="stylesheet" type="text/css" href="<?php echo get_theme_file_uri(); ?>/css/style.css?<?php get_template_part('update'); ?>">これをアップする事でホームページ上では実際にこんな感じに表示されるようになります。
<link rel="stylesheet" type="text/css" href="<?php echo get_theme_file_uri(); ?>/css/style.css?20191217">CSSの更新をした時だけupdate.phpを更新するようにすればクエリが更新されますので最新のCSSを読み込める仕組みになっています。
ひと手間かかりますが、CSSを確実に更新する方法としてのメモでした。
静的HTMLで作成されているサイトの場合
基本的なやり方はワードプレスのサイトと同じでCSSの読み込みにクエリを書きます。HTMLに直接書き込んで更新する場合はそれでOKなのですが、規模がおおきくなったり、する場合は結構大変な作業になりますので、HTMLの中でPHPが動くようにサーバー設定をいじってワードプレスのやり方同様に管理する方法をメモしておきます。
ワードプレスの時と同様にupdate.phpを用意します。
拡張子はphpでなくてもOKです。htmlでもtxtでもテキストが書いてあるファイルを用意します。
通常はHTML上ではPHPを動かす事ができないので、.htaccessファイルに追記します。これは大体同じなのですが、サーバーによって多少変わりますのでサーバーのマニュアルを参考にすると良いと思います。
ちなみにこのサイトはColorfulBox（カラフルボックス） 
というサーバーを利用しているのでこんな感じで.htaccessに追記してルートディレクトリにアップします。
AddType application/x-httpd-php .php .html注意！.htaccess をいじる際は必ずバックアップをとってから作業をしましょう。
参考
拡張子.htmlのファイルでPHPを動作させることはできますか？
カラフルボックスサポートサイト
これでHTML上でPHPが動くようになりましたので、ワードプレスでやったようにCSSの後ろに追記すれば大丈夫です。ただし、テンプレートではないのでインクルードで追記します。
<link rel="stylesheet" type="text/css" href="css/style.css?<?php include("update.php"); ?>">こんな感じでクエリを利用して最新版のCSSを読み込ませます。
モバイル版の実機テストでも役に立ちます！
他にも色々と方法はあるみたいですが、私自身は更新の際にCSSをあまり弄くりたくないのでHTMLだけ更新するパターンが多いです。
なので、CSSを更新した時だけupdate.phpの文字列を変更できるように考えました。長々とコレを読んでくれた方のお役に立てば幸いです。