Style Sheet Changer

11th Aug 2006

適用するスタイルを選んで下さい。 [セレクタ形式][マーカー形式]

これは何？

11th Aug 2006

スタイルシートを利用することで、同じhtml文書に対して色んな「見た目」を適用することが可能になります。

代替スタイルシートは、いくつかのスタイルシートを用意して、利用者に適用するスタイルシートを選択してもらう仕組みです。FirefoxやOperaではブラウザが代替スタイルシートをサポートしています。

Style Sheet ChangerはSafariやInternet Explorer for Windowsでも代替スタイルシートが利用できるようするスクリプトです。

選択されたスタイルはcookieに保存されます。また、画像を利用したプレビュー表示もサポートします。

対応ブラウザ
- Firefox 1.5以降
- Safari 2.*
- Internet Explorer 6.* for Windows
- Opera 9.*

スタイル変更後、リロード操作が必要になる場合があります(特に Safari)。

使い方

11th Aug 2006

アーカイブをダウンロードします。アーカイブには以下のスクリプトが含まれています。
- css_changer.js : メインスクリプト
- spica.js : コアライブラリ
ヘッダ部分に spica.js と css_changer.js を記述します。"spica.js"を先に記述するようにしてください。
```
<script type="text/javascript" src="spica.js"></script>
<script type="text/javascript" src="css_changer.js"></script>
```
ヘッダ部分にスタイルシートを記述します。
```
<link rel="stylesheet" 
	id="css_def" 
	title="default" 
	type="text/css" 
	href="def.css" 
	media="screen,tv" />
<link rel="alternate stylesheet" 
	id="css_alt" 
	title="alternate" 
	type="text/css" 
	href="alt.css" 
	media="screen,tv" />
```
- "rel"属性は、デフォルトのスタイル("stylesheet")か、代替スタイル("alternate stylesheet")かを示します。
- "id"属性は、マーカーとサムネイルイメージに利用されます。
- "title"属性は、スタイルのタイトルです。タイトルは指定する必要があります。
- "href"属性は、スタイルのurlを示します。必ず指定してください。
- "media"属性は、スタイルのメディアタイプを示します。

カスタマイズ

11th Aug 2006

デフォルトの設定では、Style Sheet Changerはbodyの最後に<div id="stylechanger">として現れます(もしページ内にstylechangerというidのオブジェクトがない場合)。css_changer.jsの末尾に次に示すような設定があります。

var StyleChanger = new StyleChanger({
  select : true,               // enabling selector
  dir    : './',               // image directory
  imag   : '.jpg',             // thumbnail suffix
  marker : '_marker.gif',      // marker suffix
  offset : 20,                 // offset for popup
  target : 'stylechanger',     // target id for changer
  sel_id : 'changer-selector', // selector id
  popup  : 'changer-popup',    // popup id
  mark   : '\u25A0'            // marker's symbol if it's required
});

"select"は、セレクタ形式か、マーカー形式かを選択するフラグです。"true"にセットした場合、Style Sheet Changerはセレクタで表示されます。
"dir"、"imag"、"marker"、"offset"、"mark" は、マーカー用の設定です。
- "dir"は、マーカーとサムネイルの画像が置かれているディレクトリを url で示します。
- "imag"は、サムネイル画像の拡張子を示します。サムネイルのイメージ名は「id + 拡張子」になります（<link>要素で指定されたidが利用されます）。
- "marker"は、マーカー用の画像の拡張子を示します。マーカー用のイメージ名は「id + 拡張子」になります（<link>要素で指定されたidが利用されます）。
- "offset"は、サムネイル用のポップアップボックスのオフセットを示します。
- "mark"は、マーカー用のシンボルを示します。画像の代わりに、このシンボルを利用することができます。"marker"に null が指定されていると、このシンボルが利用されます。
"target"は、Style Sheet Changerを含む要素を特定します。"target"で指定した id の要素が存在しない場合、自動的に作成されます。
"sel_id"は、Style Sheet Changerの id を指定します。セレクタ形式の場合、セレクタの id になります。マーカー形式の場合、各マーカーの id の接頭子として利用されます。
"popup"は、サムネイル表示用のポップアップボックスの id を指定します。

ダウンロード・更新履歴

11th Aug 2006

最新版ダウンロード [ver 0.01]

2006/09/06: [ver 0.01] 正しくCookie情報が保存されるように
2006/08/11: [ver 0.00] 初公開

CSS Changer