先日、仕事ではじめて『文字サイズをリアルタイムに変更できるようにしたい』という依頼を受けました。動きとしては、ボタンを押す→文字サイズが変更される→ページを移動してもその状態が引き継がれる、といった流れになるのですが、これを実現するには「文字サイズを変更したい場所に動的にclass名を付与する」「cookieをセットしてその状態をページ側で判別させる」の2つのフェーズが必要になります。

なんだか少し難しそうですが、「jquery.cookie.js」「jquery.textresizer.js」という2つの素敵なjQueryプラグインでありまして、これを使うと以下サンプルページのようなことが簡単にできちゃいます。

サンプルページ

HTMLの記述

まずは、HTML側のコーディングから。コードはいたってシンプルに、ボタンと文字サイズが変わるブロックを設置してみます。

<ul class="btn">
	<li><a href="javascript:void(0)">小</a></li>
	<li><a href="javascript:void(0)">中</a></li>
	<li><a href="javascript:void(0)">大</a></li>
	<li>
</ul>

<p id="change_fontsize">文字サイズを変えるブロック。</p>

で、これをCSSで装飾します。

/* ボタンの装飾 */
.btn {
	list-style:none
}
.btn li	{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	height:30px;
}
.btn li a	{
	display:block;
	padding:7px 10px;
	text-decoration:none;
	border:1px solid #ddd;
	border-radius:3px;
	background-color:#fff;
	background-image: linear-gradient(to bottom, #fff, #eee);
}
.btn li a:hover	{
	color:#fff;
	background-color:#c00;
	background-image: linear-gradient(to bottom, #f00, #c00);
}
/* ボタン押下時の文字サイズパターン */
.font_lv01 { font-size: 100%}
.font_lv02 { font-size: 120%}
.font_lv03 { font-size: 150%}

ここまでで、見た目の部分の構築は完成です。あとは、ボタンを押した時の動きを書いていきます。

プラグインの読込

文字サイズを変更させるために使用する以下のプラグインを用意してください。

上記2つのプラグインの用意が出来たら、head内にjQueryファイルと一緒にJavascriptファイルを読み込ませます。
<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.textresizer.js"></script>


続いて、以下JSコードを記述して「jquery.textresizer.js」を実行します。

<script type="text/javascript">
$(document).ready( function() {
	$( ".btn a" ).textresizer({
		target: "#change_fontsize",
		type: "cssClass",
		sizes: [ "font_lv01", "font_lv02", "font_lv03" ]
	});
});
</script>

targetは、文字サイズを変更させるエリアを指定です。sizesは、ボタンに割り振られるclass名のスイッチです。ボタンを押すと、targetにこのclass名が付与されます。1つ前のCSSの「ボタン押下時の文字サイズパターン」の部分になります。

はい、これでコードの記述はこれで終わりです。あとは、実際にページにアクセスして動きをチェックしてみましょう。え?cookieについては一切書いてない? いえいえ、確かにそうなんですがこれで本当に完成です。実際にページにアクセスしてみてください。

もしも動かない場合は、ファイルが正しく読み込めているか、記述に間違いがないか、を確認してみてください。それでも動かない場合は、jQuery.jsのバージョンも変更してみましょう。