前の記事 ≪：PHPタグクラウドのチュートリアル
次の記事 ≫：WEB開発者のためのリソースを集めたリンク集

JavaScriptを使わずにページのCSSを切り替える

2006年08月28日-はてなブックマーク

スポンサード リンク
[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法

ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、
JavaScriptオフでも同様のことを実装したい場合のサンプル。

JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。

PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。
次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。

(1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 )

<?php
$valids = array(
 "main", "blue", "red", "pink"
);
$layout = (isset($_REQUEST["layout"])) ? $_REQUEST["layout"] : "main";
if (in_array($layout, $valids)) {
    setcookie("layout", $layout, time()+24*3600*30, '/');
}
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "/"; 
header("Location: $ref"); 
?>

このスクリプトを、サーバ上の /switch/index.php というパスに設置しておきます。
そして、 http:// ? /switch/?layout=blue のようにアクセスすることで、レイアウト用のクッキーを30日間保存できます。
クッキーを保存した後は、リファラを見て、元来たページに戻ります。単なるクッキー設定用のURLです。
※上記サンプル例では、main, blue, red, pink が有効なcss名として定義されていますが、追加/編集することで自由に切り替えが可能です。

(2) 次に、CSSを動的に読み込むHTML画面 ( php ファイル )

<?php
$layout = (isset($_COOKIE["layout"])) ? $_COOKIE["layout"] : "main";
?>
<html>
<link rel="stylesheet" type="text/css" href="/css/<?php echo $layout; ?>.css">
<body>
<a href="/switch/?layout=blue">青のレイアウトに変更</a><br>
<a href="/switch/?layout=pink">ピンクのレイアウトに変更</a><br>
<a href="/switch/?layout=red">赤のレイアウトに変更</a><br>
</body>
</html>

クッキーからレイアウト用の値を読み、クッキーの値によってCSSを読み込むようなHTMLを出力するPHPファイルになっています。
CSSが動的に変わることで、レイアウトも動的に変更できるというわけですね。
特に難しいスクリプトではないので実装は容易でしょう。

PHPが分かる人にとっては当たり前のようなサンプルになってしまいましたが、デザイナーの方などが使う分には便利かも。

参照
Build your own PHP style sheet switcher | 456 Berea Street

関連エントリ
MovableTypeのPHP化をhtaccessで行う

関連の記事検索：CSS, JavaScript, チュートリアル
スポンサード リンク

By.KJ : 2006年08月28日 07:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)