親切なUIに必須！ JavaScriptライブラリ StyleSwitcher.jsの使い方メモ

社内システムで使用する機会があったのでメモ。

StyleSwitcher.jsはリンクのクリックにより、読み込むCSSファイルを簡単に切り替えることができる便利なjavascriptライブラリである。

設置方法が簡単というだけでなく、変更されたスタイル情報はcookieに保存されるため、一度設定するとページ遷移や再訪問の際にも前回分が反映されるという優れものである。複数のcssを読み込んでスタイルを変更させるので、一括変換的なものを使用するより微調整が可能。当然文字サイズだけでなくカラーや配置を変えることにも応用できる。

今回は文字サイズ変更を目的として使用したため、文字サイズ変更の例。

１．ダウンロード

下記よりStyleSwitcher.jsをダウンロードする。
http://alistapart.com/article/alternate

２．CSSを準備する。

以下の４種類のCSSを準備する。

style.css（メインのCSS）

fs-standard.css（標準サイズ用CSS）

fs-large.css（大サイズ用CSS）

fs-small.css（小サイズ用CSS）

メインはstyle.cssへ記述し、style.cssに対して加えたい変更点のみを下記のように記述する。

/* fs-standard */
#parts-fsStandard {background:url(images/fs-standard-on.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-off.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-off.png) no-repeat;}

body {
  font-size:16px;
}

/* fs-large */
#parts-fsStandard {background:url(images/fs-standard-off.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-on.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-off.png) no-repeat;}

body {
  font-size:20px;
}

/* fs-small */
#parts-fsStandard {background:url(images/fs-standard-off.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-off.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-on.png) no-repeat;}

body {
  font-size:9px;
}

３．適当な位置にファイルを配置

４．必要となるページのhead内で読み込む

切り替え用のcssはrel="alternate stylesheet"とし、title設定も必要。

<script type="text/javascript" src="<?=base_url()?>css/js/styleswitcher.js"></script>
<link href="<?=base_url()?>css/fs-standard.css" type="text/css" rel="stylesheet" title="fs-standard">
<link href="<?=base_url()?>css/fs-standard.css" type="text/css" rel="alternate stylesheet" title="fs-standard">
<link href="<?=base_url()?>css/fs-large.css" type="text/css" rel="alternate stylesheet" title="fs-large">
<link href="<?=base_url()?>css/fs-small.css" type="text/css" rel="alternate stylesheet" title="fs-small">
<link href="<?=base_url()?>css/style.css" type="text/css" rel="stylesheet">

５．bodyへ以下のように記述

onclick="setActiveStyleSheet('fs-small')の名称はtitle名と合わせる。

<a id="parts-fsSmall" class="test" onclick="setActiveStyleSheet('fs-small'); return false;" href="javascript:void(0);">小</a>
<a id="parts-fsStandard" class="test" onclick="setActiveStyleSheet('fs-standard'); return false;" href="javascript:void(0);">中</a>
<a id="parts-fsLarge" class="test" onclick="setActiveStyleSheet('fs-large'); return false;" href="javascript:void(0);">大</a>