文字サイズを変えるボタン

（例）

（１）cssファイルを３つ用意する。

「style1.css」
#contents {font-size:80%;
line-height:130%;
}

「style2.css」
#contents {font-size:100%;
line-height:140%;
}

「style3.css」
#contents {font-size:120%;
line-height:140%;
}

※「contents_css」フォルダに入れて管理
　つまり「href="contents_css/▲▲▲.css"」

（２）Alternative Style: Working With Alternate Style Sheetsの
「Download styleswitcher.js」から
JavaScript「styleswitcher.js」ファイルをダウンロード。
※「js」フォルダに入れて管理
　つまり「href="js/styleswitcher.js"」
※念のためここにもアップしときます。
この中で「有効日数」とかの設定も出来るらしい。

（３）html内の</head>の前に下記を挿入。
<link rel="stylesheet" type="text/css" media="all" href="▲▲▲.css"/>
<link rel="alternate stylesheet" type="text/css" href="contents_css/style1.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="contents_css/style2.css" title="standard" />
<link rel="alternate stylesheet" type="text/css" href="contents_css/style3.css" title="large" />
<script type="text/javascript" src="js/styleswitcher.js"></script>

（４）<div id="contents"></div>内にボタンを作成。
★文字サイズを切り替えるボタンの a 要素に onclick イベントを追加する。
setActiveStyleSheetのパラメータに、切り替えたい CSS の title 属性の値（↑）を指定します。
<a href="javascript:void(0);" onclick="setActiveStyleSheet('small'); return false;">小</a>
<a href="javascript:void(0);" onclick="setActiveStyleSheet('standard'); return false;">中</a>
<a href="javascript:void(0);" onclick="setActiveStyleSheet('large'); return false;">大</a>

---------------------------------

styleswitcher.jsにやられた！！
テストサーバーで試すと、変更した文字サイズを保持しない状況に。
それでずっと、ずぅーーっと困ってた。
えっ？このjsファイルが「www.」有りと無しを区別するらしい？
「www.」有りと無しを両方見てしまったがために起きた現象のようで、
Cookieとキャッシュを削除してから
「www.」無しを見ずに「www.」有りを見たら
ちゃんと動作するようになりました。

これにかなりの時間を費やしてしまった。
疲れた。。。
もっと早くモリジュンに聞くべきでしたー！！！