webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

「キャッシュ削除してください」と言わなくて良い書き方

「キャッシュを削除」からの卒業

月曜日〜火曜日は、前の週にやすともさんが出た番組をTverでチェックするのが日課です

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

こんにちは。

何か更新した後にお客さまから

変わってませんよ〜困り顔

と言われること、ありませんか?

その度に

「キャッシュを削除して再読み込みもしくは、キャッシュの残らないシークレットウインドウなどで確認していただけますか?」

と説明するのは忙しい時には大変です。

なんと、その説明をしなくて良い方法があります。

ではその方法を紹介します

パラメーター

もうすぐ8才の息子が描いたドラえもんパラメぇータぁー

はい、これですね。

リンクURLに”パラメーターを付与してあげる”で解決です。

URLパラメータとは、サーバーに情報を渡す時に付け加える「変数」のことです。

<link rel="stylesheet" type="text/css" href="style.css" /> 

こんな感じでHTMLにスタイルシートを読み込みますよね。

ここに「変数」を付与するとサーバー側は

サーバーstyle.cssとは別のスタイルシートだぁ〜

ということになるのかキャッシュが残りません。

安定のざっくり解説

通常の流れ

1 スタイルシートを編集しアップロード

2 お客さま確認「変わってない」

3 キャッシュ削除お願いします

キャッシュを削除しなくて良い流れ

スタイルシートを編集した後、その読み込みをするURLの末尾に「?xxx」を付与します。

<link rel="stylesheet" type="text/css" href="style.css?ver2" />

1 スタイルシートを編集しアップロード

2 スタイルシート読み込みURLにパラメータを付与し、HTMLファイルもサーバーにアップロード

3 お客さま確認「お、変わってる」

「?xxx」xxxは数字でもアルファベットでもOKです。

アップロードする前に変更してくださいね

PHPファイルの場合

PHPファイルの場合は、なんとなんとなんと、オススメがあります。(大袈裟)

<link rel="stylesheet" href="style.css?var=<?php echo date('Ymd-His'); ?>" type="text/css"/>

私が使っているのはこれです。

WordPressテーマはこうしています。

<?php echo date('Ymd-His'); ?>

echoで日時を出力しています。

すると、パラメータの書き換え不要なのです!!!!!!!

アップロードする度自動でパラメータ変更となる超楽々テクニック

日時をパラメータにしてアップロード
日時をパラメータにしてアップロード

アップロードしたものをソース表示して確認するとこんな感じになっています。

画像

ここでちょっと注意ポイントがあります。

CSSにパラメータを付与しても、画像にはキャッシュが残ります。

画像の変更をなかなか確認できない場合は、<img>にパラメータ付与してください。

<img src="img/nav/icon-beginner.png?xxx" alt="">

「xxx」を変更です。

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング 「キャッシュ削除してください」と言わなくて良い書き方

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)