ブログ

ブログを立ち上げて間もない状態なので、ブログのレイアウトやデザインの微調整のためにスタイルシートを頻繁にいじっている状態になっています。

で、このスタイルシートがブラウザにキャッシュされていて、内容を変更しても閲覧している側がページの再読み込みをしてくれなければ、古いキャッシュファイルのスタイルシートのまま閲覧されておかしなレイアウトになっていることってあると思います。

正確には、自分が使っているFirefox2.0はスタイルシートが変更されたら、自動的にスタイルシートを再読み込みしてくれているのかこの現象は出ないのですが、IE6.0だと、スタイルシートを変更しても古いスタイルシートを使ってレイアウトがおかしくなります。

これを回避する為にちょっとした小技メモ。

ファイル名が同じでもHTMLで読み込む際のファイル名の後に、?v=xxx をつければ、別ファイルとしてキャッシュされるようです。これが、HTMLの文法的にありかなしなのかは調べていないから分かりませんが、割と使われている方法みたいだし、この際その辺の細かいことは気にせずコレを利用します。

?v=xxxを使った例

<style type="text/css" media="screen">
@import url(style.css?v=1.0.0);
</style>

この ?v=xxx の xxx 部分を更新時間が表示されるようにして、スタイルシートを修正すると自動で xxx が変更されるようにします。

WordPress の場合は、スタイルシートを読み込んでいる処理をしているところは、以下のファイルがほとんどだと思うのでここを修正すればOKです。

/wp-content/themes/テーマ名/header.php

スタイルシートのパスを出力する関数は、

<?php bloginfo('stylesheet_url'); ?>

でこの後に、ファイルの更新時間を取得する関数 filemtime('ファイルのパス') を使って

?v=<?php filemtime('ファイルのパス') ?>

を追加します。

WordPressでのカスタマイズ例

難しいことは分からないという人のために WordPress で使えるサンプルコードを以下に書いておきますが、この小技は、WordPressだけじゃなく、スタイルシートのパスさえ変更すれば、いろいろなところで使えます。

<style type="text/css" media="screen">
@import url(<?php bloginfo("stylesheet_url"); ?>?v=<?php echo filemtime(get_stylesheet_directory() . '/style.css'); ?>);
</style>