Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

CSS ファイルの圧縮転送

Feb232008
Vote:
http://bizcaz.com/archives/2008/02/23-230140.php
Categories: Tools
Tags: CSS
Social Bookmark

Prev Page: 参考になりそうな CSS リファレンス（Resetting Again）
Next Page: シムエントリ

こんばんわ^^

今日は暖かかったですね (●´∀｀●)
そのせいか、ウチの猫タンは外に出たがって（いつもだけど）、うるさいのなんのって (;￣∇￣A

とりえあず庭に出してあげるのですが、風が強かったこともあって落ち葉と戯れてました。
明日は寒くなるらしいです (´Д｀；)

さて、CSS を gzip 圧縮して転送する方法を、K's Labo さんとこでご紹介されてたので実際にやてみました。

CSSファイルをPHPで圧縮

キャッシュ機能も付いてるので、毎回圧縮／展開が行われることはありません。
前にも同じようなことやったことあったのですが、その時とコードが似てるなぁと思って、わたしのメモ帳を検索したらやっぱり同じコードだった (●＞∀＜●) きゃは

PHPでCSS圧縮

CSS を gzip 圧縮して転送

前提条件として、お使いのサーバで PHP が使える必要があります。
今時のサーバなら PHP はどこでも使えるかと思いますが一応念のため (;￣∇￣A

テンプレートモジュール作成
gzip 圧縮／解凍する以下の PHP コードをテンプレートモジュールとして保存します。
テンプレートモジュール名称は任意で構いません。たとえば「gZip Handler」などで保存します。
1. <?php
2. ob_start ("ob_gzhandler");
3. header("Content-type: text/css");
4. header("Cache-Control: must-revalidate");
5. $offset = 60 * 60;// 60 × 60(sec)
6. $ExpStr = "Expires: " .
7. gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
8. header($ExpStr);
9. ?>
赤い字の部分はキャッシュ有効時間（秒）を指定してます。
上記では 1 時間だけキャッシュするようになっていますが、各自のお好みで変更してください。
CSS ファイル名変更
インデックステンプレート一覧内にある各 CSS ファイルの先頭（1 行目）に以下を追加します。
1. <mt:include module="gZip Handler">
赤い字の部分には、先ほど作成したテンプレートモジュール名称を指定します。
そして、CSS の出力ファイル名を xxx.css から xxx.php のように拡張子を変更して保存します。
各テンプレートの HTML ヘッダ( <head>～</head> )内で記述している、CSS 読込みの記述を以下のように変更します。
1. <link rel="stylesheet" href="http://bizcaz.com/styles.php" type="text/css" />
赤い字の部分のように、拡張子を .css から .php に変更します。