jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。
自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。
僕自身も医療系のサイトに関わることが多いのですが、「設置して当然」の要件となりつつある感じ。
まー、正直「周りがやってるから」というのが主な理由なんですが、結果としてユーザビリティやアクセシビリティにつながるなら良しとしましょう（誰

今回は、その「ボタンをクリックして文字サイズを変更」する機能を実現する方法について、定番を 1 つと、新しく見付けたのを 1 つご紹介します。
定番の方は、プラグインを追加するだけなので手軽＆気軽にできるのが特徴。
新発見の方は、いろいろ書かないといけないので若干メンドくさいですが、その分、変更するスタイルの種類を混在させること（文字サイズ＆背景色等）も可能となっております。

定番、「styleswitcher.js」で切り替え

最も定番なのは「styleswitcher.js」を使用する方法だと思います。
このスクリプト自体は、名前の通り「スタイルを切り替える」もの。
つまり、「同じセレクタに異なる文字サイズを設定した CSS ファイルを複数用意して、クリックしたボタンに応じて読み込むファイルを切り替える」ということです。

具体的な設定は以下。

まず、CSS ファイルを設定して……、

<link rel="alternate stylesheet" href="css/fontsize_standard.css" type="text/css" title="fontsizeStandard" />
<link rel="alternate stylesheet" href="css/fontsize_large.css" type="text/css" title="fontsizeLarge" />
<link rel="alternate stylesheet" href="css/fontsize_xlarge.css" type="text/css" title="fontsizeXLarge" />

JavaScript ファイルを読み込んで……、

<script type="text/javascript" src="js/styleswitcher.js"></script>

あとはクリックしたボタンに応じて JavaScript 関数を呼び出して CSS ファイルを切り替えるだけです。

<ul class="btns">
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('fontsizeStandard'); return false;">文字サイズを標準に</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('fontsizeLarge'); return false;">文字サイズを大きく</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('fontsizeXLarge'); return false;">文字サイズを最大に</a></li>
</ul>

link 要素で設定した CSS の title 属性を「setActiveStyleSheet」関数の引数として設定することで、それに応じた CSS ファイルが読み込まれるという仕組みです。
あ、ベースとなる設定は、切り替え用の CSS とは別に記述しておいてくださいね。
Cookie にも自動的に保存されるので、別のページに移っても設定は保持されます。これが地味に便利。

前述の通り、「styleswitcher.js」は読み込む CSS ファイルを切り替えるスクリプトです。
なので、読み込む CSS の中身を工夫することで、文字サイズ以外にも色々な切り替え（背景色とか文字色とか）ができます。
但し、「文字サイズを切り替えつつ、背景色も」のような混在はできません。
（できる方法がひょっとしたらあるのかも知れませんが、僕にはムリでした）

「styleswitcher.js」のダウンロードは以下から。
»A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets
ダウンロードのリンクを見付けるのはなかなか困難だと思うので、「download」でページ内検索してください。
だいぶ下の方まで飛ばされると思います。

もう少し詳しい使い方などは以下ページを参照ください。

他にも「styleswitcher.js 文字サイズ」とかでググれば、いっぱい見付かると思います。

新発見、「jquery.cookie.js」で切り替え

新発見の方は、jQuery で Cookie を簡単に扱える「jquery.cookie.js」というライブラリを使います。
【ｅ‐Ｔａｘ】国税電子申告・納税システム（イータックス）のソースをたまたま見て、jQuery で Cookie が使えることを初めて知りました。
そのソースをベースにしてあれこれ試した結果、何となく使い勝手が分かってきたのでご紹介します。

ライブラリ自体の説明は他へ譲るとして、とりあえず実際のソースを見ていきましょう。
「styleswitcher.js」では出来なかった、「「文字サイズを切り替えつつ、背景色も」のような混在」も、関数名を変更することで実現しています。

まずは CSS。

<link rel="stylesheet" href="css/fontsize_standard.css" type="text/css" id="styleFontsize" />
<link rel="stylesheet" href="css/bgcolor_white.css" type="text/css" id="styleColor" />

次、JS。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#styleFontsize").attr({href:$.cookie('style01')});
	$("#styleColor").attr({href:$.cookie('style02')});
});
function switchFontsize(cssname){
	var cssurl= 'css/'+cssname+'.css';
	$('#styleFontsize').attr({href:cssurl});
	$.cookie('style01',cssurl,{expires:30,path:'/cookietest/'});
}
function switchColor(cssname){
	var cssurl= 'css/'+cssname+'.css';
	$('#styleColor').attr({href:cssurl});
	$.cookie('style02',cssurl,{expires:30,path:'/cookietest/'});
}
-->
</script>

んで、HTML。

<ul class="btns">
<li><a href="javascript:void(0);" onclick="switchFontsize('fontsize_standard'); return false;">文字サイズを標準に</a></li>
<li><a href="javascript:void(0);" onclick="switchFontsize('fontsize_large'); return false;">文字サイズを大きく</a></li>
<li><a href="javascript:void(0);" onclick="switchFontsize('fontsize_xlarge'); return false;">文字サイズを最大に</a></li>
</ul>

<ul class="btns">
<li><a href="javascript:void(0);" onclick="switchColor('bgcolor_white'); return false;">背景色を白に</a></li>
<li><a href="javascript:void(0);" onclick="switchColor('bgcolor_red'); return false;">背景色を赤に</a></li>
<li><a href="javascript:void(0);" onclick="switchColor('bgcolor_yellow'); return false;">背景色を黄に</a></li>
<li><a href="javascript:void(0);" onclick="switchColor('bgcolor_black'); return false;">背景色を黒に</a></li>
</ul>

サンプルも作ってみました。

jQuery を使ったことがある人ならだいたい分かると思いますが、処理自体は link 要素の href 属性を切り替えているだけです。
処理自体は単純なんですけど、Cookie で状態を保持できることによって、その価値が随分上がってますよね。
利便性というか、使う意味のようなものが格段に増しているような気がします。

「style01」「style02」というのが、Cookie の保存名です。
保持するデータを入れておく箱のようなイメージですかね。

「expires」はデータを保持する日数、「path」はどのパスにアクセスしたときにデータをサーバーへ送信するか、をそれぞれ設定してます。
（あと、「domain」でドメインも設定できますが、それは省略してます）

上記の例では「/cookietest/」が設定されているので、ユーザーが「/cookietest/」にアクセスしたときのみ、Cookie のデータがサーバーへ送信されることになります。
サイトの全ページで Cookie が送信されるようにしたい場合は、そのサイトのルートのパス（「/」など）を設定してください。
独自ドメインではなく、共有サーバーの URL をそのまま使っていたりする場合は、「/」にすると他のサイトにアクセスしたときにも Cookie が送信されることになるので注意してください。

ちなみに、「path」は省略するとアクセスしたそのページのディレクトリが設定されるので、このサンプルに限っていえば設定する必要はないのです。
サンプルなので明示的に書いてみたってことです。（「じゃあ「domain」も書け」って言われたらどうしよう）

あと、Cookie 関連の処理は「jquery.js」と「jquery.cookie.js」がないとできないので（当たり前）、切り替えボタンがないページでもちゃんと読み込むようにしてください。
ファイルの読み込みだけでなく、スクリプトの記述も忘れずに（Cookie のセットの部分だけで良いです）。
このあたりもサンプルを見ていただければ分かるかと。
対象となるページすべてに切り替えボタンを設置するのがほとんどだと思うので、問題はないと思いますが。

ここでは CSS だけ切り替えていますが、画像のパスを切り替えることも可能です。
そうすれば、文字サイズの変更に合わせてボタンの画像を保持しておくこともできるので、どのサイズを選んでいるかが分かりやすくなったりしますね。
もちろんその分スクリプトの記述は増えますが、まぁ jQuery ですし、手間をかけるだけのメリットはあるんじゃないでしょうか。

「jquery.cookie.js」自体の説明は、以下のページに詳しく掲載しています。

あと、Cookie そのものの解説も少し。

簡単なまとめ

お手軽なのは、間違いなく「styleswitcher.js」です。
ただ、簡単な分やっぱり制約も多かったりします。
「jquery.cookie.js」を使った方法は、いろいろと手間はかかりますが、いろいろと応用の幅は広いような気がします。

ま、一長一短なので、そのときの状況に応じて使い分けてください。

ほとんどの場合は「styleswitcher.js」で問題ないと思います。
まずはそれで考えて、それじゃどうにも思ったことができないよ、となってから「jquery.cookie.js」の使用を検討してみたら良いんじゃないでしょうか。

動作確認はかなりしたつもりですが、もし何かおかしなところがあったら教えてください。