スタイルシートチェンジャー

スタイルシートチェンジャーはサイトのスタイルシートを訪問者が選択して切り替えられるようにするスクリプトです。訪問者は、サイト作成者が用意した外部スタイルシートから好きなものを選択して、好みのデザインで閲覧できるようになります。JavaScriptでスタイルシートを切り替えるものがありますが、これはPHPのスクリプトによって、各ページに外部スタイルシートを指定するlink要素を直接挿入して切り替えます。v1.00からUAに応じてCSSを自動で切り替えられるようになりました。

とりあえず試してみる。↓

スタイルシートチェンジャーEXはスタイルシートチェンジャーに日にちや時間によって自動的にスタイルシートを切り替える機能を追加したものです。○時から○時まではこのCSS、○月○日から○月○日まではこのCSS、のように設定しておけば勝手にCSSを切り替えます。サイトデザインを変更する機会が多ければ少しは役に立つかもしれません。

このページでは以降、スタイルシートチェンジャーEXはEXと表記します。また、特に記述がなければ両スクリプト共通の説明になります。

使用上の注意

動作には、PHP v4.0.1以上が利用できる環境が必要です。
ブラウザが外部スタイルシートに対応していないと、スタイルシートを変更できません。
ブラウザでクッキーが利用可能になっていないと、スタイルシートを変更できません。
CSSを選択したり変更を適用するページは、*.phpにする必要があります。
このスクリプトを使用したことによる損害には作者は一切の責任を負いません。各自の責任において使用してください。
このスクリプトはフリーですが著作権は放棄していません。
このスクリプトを使用することで利益を得る行為は全面的に禁止します。

CSSの実装はブラウザによって異なるので、そこらへんも注意する必要があります。ご使用の際は、差し支えなければリンクさせて頂きたいと思いますので、ぜひご連絡ください。質問や要望などがありましたらがらくたBBS-PHPでどうぞ。

スタイルシートチェンジャー v 1.02 をダウンロードする？→ csschg102.lzh

スタイルシートチェンジャーEX v 1.00 をダウンロードする？→ csschgex100.lzh

設置方法

スクリプト本体

ダウンロードしたファイルを解凍して、setstyle.php と、chgstyle.php の２つのファイルを任意のフォルダにアップロードします。アップロードしたフォルダのパーミッションを 705 以上にして、各ファイルのパーミッションを604以上に設定します。動かなかった場合はパーミッションを指定数値より大きくして試してみてください。もちろん、PHPの動くサーバでないとダメです。

変更用外部CSSファイル

自分で作るか配布サイトから頂戴するなどして、任意のディレクトリにまとめて置いておきます。

CSSを選択するページ

CSSを選択するドロップダウンメニューを表示させたい場所に、<?php include("setstyle.php"); ?> を挿入します。

CSSの変更を適用させるページ

適用させたいページの、<head>～</head>間に、<?php include("chgstyle.php"); ?> を挿入します。

設置例

”http://www.hoge.com/index.php”がサイトのホームページだとして、このページでスタイルシートを変更できるようにしてみます。

　/　←サイトルートディレクトリ。
　｜　index.php　←サイトホームのページ内に<?php include("setstyle.php"); ?>を挿入します。
　｜　setstyle.php　←サイトルートにsetstyle.phpをアップします。
　｜　chgstyle.php　←サイトルートにchgstyle.phpをアップします。
　｜　hoge.php　←サイトルートのページには<?php include("chgstyle.php"); ?>を挿入します。
　├　style/　←変更用外部CSSファイルを格納するディレクトリ。
　｜　　main.css　←変更用外部CSSファイル(これをデフォルトのCSSと仮定します)。
　└　hoge/　←ルート以下のディレクトリ。
　　　　hogehoge.php　←ルート以下のページには<?php include("../chgstyle.php"); ?>のように挿入します。

setstyle.phpの $selfurl は”http://www.hoge.com/setstyle.php”または”/setstyle.php”に、$csspath は”http://www.hoge.com/style/”または”/style/”にします。chgstyle.phpの $default_css は”http://www.hoge.com/style/main.css”または”/style/main.css”にします。インクルードするスクリプトファイルはインクルードするページからの相対パスで指定します。このように設定・設置すると、hogehoge.phpに<?php include("../setstyle.php"); ?>を挿入し、このページでスタイルを変更してもサイト全体に反映されます。

設定変更

各ファイルをメモ帳等で開いて、設定項目を環境に合わせて変更します。

setstyle.php

$home: 変更完了ページの「HOMEへ戻る」のリンク先。CSS変更後に変更完了ページを表示しないでCSSを選択したページをリロードする設定（以下の$reload参照）ならする必要はありません。
$selfurl: このスクリプト（setstyle.php）の場所とファイル名。URLか絶対パス指定を推奨。
$csspath: 変更用外部CSSファイルのあるディレクトリ。最後に”/”をつける。URLか絶対パス指定を推奨。
$reload: 0：CSS変更後、変更完了ページを表示する。どのCSSに変更したのか確認できる。
1：CSS変更後、変更完了ページを表示しないで、CSSを選択したページをリロードする。
$cookie: 保存するクッキー名。特に変更する必要は無いが、変更した場合は chgstyle.php の $cookie も同じにする。
$expire: クッキーの有効期限。EXの場合は有効期限を短く（30日などに）した方が良いでしょう。
$css_file[数字]: 変更用外部CSSファイルのファイル名を必要なだけ書きます。ファイル名を”none”にするとCSSを指定しません。
$css_title[数字]: 変更用外部CSSファイルに対応したタイトル（説明）を書きます。
CSS選択のドロップダウンメニューにはこれが表示されるので分かり易いものにした方がいいでしょう。
$dayschedule: 日にちによってCSSを変更、0:しない、1:する。EXのみの設定です。
$daytable[数字]: ”2007/1/1 2007/1/31”のようにCSSの変更期間の変更開始日を左に、変更終了日を右に、半角スペースで区切って書きます。
この例の場合は１月中が変更期間になります。1日だけの場合は左右同じ日付にします。EXのみの設定です。
$daydistcss[数字]: 上記の指定期間中に適応させるCSSのファイル名を書きます。EXのみの設定です。
$timeschedule: 時間によってCSSを変更、0:しない、1:する。EXのみの設定です。
$timetable[数字]: ”0 1 6 23 ”のように0～23までの２４時間制でCSSを変更する時間を書きます。２４時間すべて指定する必要はありません。
この例の場合は０時台、１時台、６時台、２３時台に同じCSSを適応させます。EXのみの設定です。
$timedistcss[数字]: 上記の指定時間中に適応させるCSSのファイル名を書きます。EXのみの設定です。

chgstyle.php

$cookie: 保存するクッキー名。特に変更する必要は無いが、変更した場合は setstyle.php の $cookie も同じにする。
$default_css: CSS変更前やクッキーが無効な場合のデフォルトのCSSファイルのURL。相対パスだと設置が面倒になるので、絶対パスを推奨。
$autoselect: CSS変更前やクッキーが無効な場合にUAに応じCSSを自動で切り替え　0:しない、1:する。
$expire: クッキーの有効期限。setstyle.php の $expire と同じにします。EXのみの設定です。
$dayschedule: setstyle.php の設定と同じにします。EXのみの設定です。
$daytable[数字]: setstyle.php の設定と同じにします。EXのみの設定です。
$daydistcss[数字]: setstyle.php の設定と同じにします。ただし、CSSファイルは絶対パス指定にします。EXのみの設定です。
$timeschedule: setstyle.php の設定と同じにします。EXのみの設定です。
$timetable[数字]: setstyle.php の設定と同じにします。EXのみの設定です。
$timedistcss[数字]: setstyle.php の設定と同じにします。ただし、CSSファイルは絶対パス指定にします。EXのみの設定です。

UAに応じたCSSの自動切り替えについて

$autoselect を”1”に設定するとUA（ユーザーエージェント、ブラウザの種類やバージョン）に応じてCSSを自動で切り替えられます。UA別のCSSファイルは、chgstyle.phpのスクリプト中の $default_css = "/style/opera.css"; // Opera のように書いてある部分で指定します。コメントを参考にUA別のCSSファイルを $default_css と同じように指定してください。自動切り替えする必要がないUAについては、自動切り替えしない場合のCSSを指定します。そのUAを判別している部分を削除しても構いませんが、判別の順番は変えないでください。

URLやディレクトリの指定について

chgstyle.php で出力されるlink要素の外部スタイルシートのパスは、setstyle.php の $csspath で指定しています。このパスは相対パスでも指定できますが、相対パスにすると下位ディレクトリのページでは正しいパスにならないので注意してください。$home、$selfurl ついても同じで、利便性を考えれば設置も容易だし、URLか絶対パスで指定した方が良いと思います。

クッキーの有効範囲について

クッキーは、CSS選択に指定した setstyle.php のあるディレクトリをルートとして、下位ディレクトリすべてが有効範囲になります。例えば、サイトのルートディレクトリに置いた setstyle.php でCSSを選択した場合、サイト全体が有効範囲になります。setstyle.php の $selfurl は実行する setstyle.php を指定しています。ここでサイトのルートディレクトリに置いた setstyle.php をURLか絶対パスで指定しておけば、サイトのどのページからCSSを変更してもサイト全体に反映されるようになります。

EXの動作等について

日にちや時間で自動切り替えするCSSの優先順位

日にち指定と時間指定が重なった場合は日にちの方が優先されます。どちらの指定もなければ通常の動作になります。通常時のデフォルトCSSである setstyle.php の $css_file[1] と chgstyle.php の $default_css が日にちまたは時間によって指定されたCSSに置き換えられるので、この２つは同じ設定（通常時のCSSファイル）にしておいてください。指定時間内でもデフォルトCSS以外を選択すれば、スタイルシートチェンジャーと同様の動作になります。

ブラウザのキャッシュの関係

CSSが自動切り替えされていてもブラウザの設定によってはページをリロードしないとすぐには反映されないことがあります。すぐに反映させたい場合は、HTTPヘッダやmeta要素を使ってブラウザがそのページをキャッシュしないようにさせれば効果があるかもしれません。かもしれません、てのはこれもブラウザの仕様によるため。

PukiWikiやブログなどでCSS切り替え

PukiWikiやMovableTypeなどのCMSやブログでも比較的簡単にCSSを切り替えできるようです。私はCMSは使用したことがないのですが、スタイルシートチェンジャーでのCSS切り替え方法を解説してくださっているサイトを紹介させて頂きます。

FrontPage - PukiWikiはいかが？: Yoshiiさん運営のPukiWikiに関する様々な情報のあるサイト。もちろんPukiWikiのサイトです。Pukiwikiのスキンも配布されています。PukiWikiのCSSをスタイルシートチェンジャーで切り替える方法の解説もあり、配布スキンはその場で確認できます。黒背景のskin002が意外と見易く、いい意味でPukiwikiっぽくないので気に入ってます。
独り言Place: JingShangさん運営のMovableType他の覚え書きやJAVAのゲームなどのあるサイト。もちろんMovableTypeなサイトです。MovableTypeのCSSをスタイルシートチェンジャーで切り替える方法の解説があり、実際に切り替えできます。背景に画像を使用しているせいか、かなり劇的に変化します。

変更ボタンを使わずにCSSを切り替える方法（JavaScriptを使用）

CSS変更フォームのドロップダウンメニューでCSSを選択するとすぐにCSSを変更するようにする方法です。JavaScriptを使用しますが、JavaScriptが無効な時は送信ボタンで変更できます。

CSS変更フォームを表示するページ(setstyle.phpをインクルードしたページ）の<head>～</head>間に以下のJavaScriptコードを記述します。

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function ChangeStyle() {
document.ccform.method = "post";
//下の行でsetstyle.phpをhttp://から始まる絶対パスで指定
document.ccform.action = "http://www.hoge.com/setstyle.php";
document.ccform.submit();
}
-->
</Script>

setstyle.phpを以下のように書き換えます。

echo "<form method=\"post\" action=\"{$selfurl}\">\n";
を
echo "<form method=\"post\" action=\"{$selfurl}\" name=\"ccform\">\n";
に

echo "<select name=\"cssnum\">\n";
を
echo "<select name=\"cssnum\" onChange=\"ChangeStyle()\">\n";
に

echo "<input type=\"submit\" value=\"変更\">\n";
を（この行を削除してしまってもいいですが）
echo "<noscript><input type=\"submit\" value=\"変更\"></noscript>\n";
に（こうするとJavaScriptが無効なときには変更ボタンで変更できます）

Scrapbox