設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer

なかなか便利かもと思ったのでメモ。よくある、
フォントサイズを変更できるやつなんですけど、
設定が凄く楽で軽量なjQueryプラグインです。
導入も楽なので積極的にうまく入れて行きたい
ですねー。正直使ってもらえるか分からない
ものですけど、あれば誰かに役に立つかも
知れませんし。

軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITとGPLのデュアルライセンスとなっています。

Font sizer

これこれ。よく見かけますよね。多くの場合は小、中、大となっていますが、これはもっと細かい設定を簡単に行えます。ボタンは若干分かりにくいのでその辺は工夫してみてください。

設定を変える

プラグイン（jquery.fontSizer.js）を開いて20行目あたりの変数定義の部分です。

		var defaults = {
			maxSize: 30,			
			minSize: 5,
			increment: 5,
			baseSize: parseInt($('body').css('font-size')),
			controlWrapID: 'control-wrap',
			controls: true,
			autoClass: true,
			textContainerClass: 'fs-text',
			elements: 'h1, h2, h3, h4, p, a, ul',
			controlPlusID: 'fs-plus',
			controlMinusID: 'fs-minus'
		};

だいたい分かると思いますけど

maxSizeが一番大きいフォントサイズ
minSizeは最小サイズ
incrementは、一回のクリックでどれくらいサイズを変更するか、の単位。2なら2pxずつ拡大/縮小が出来るようになります。
elementsで、適応場所を指定します。
baseSizeでcssで指定したサイズを初期値に指定。
controlWrapIDはボタンを配置するためのものです。

簡単ですねー、これは。

コード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fontSizer.js"></script>
<script type="text/javascript">
	$(document).ready(function() {			
		$('ul#controls a').fontSizer();
	});
</script>

で、マークアップ