skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォントサイズを調整するJavaScript「fontScaler」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォントのサイズをユーザーが調整できるサイトは多いですが、大中小と制作者側で決めてしまってよいのでしょうか？
jQueryプラグイン「fontScaler」は+-でも調整が可能です。

使用方法
fontScalerからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="jquery.fontSizer.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fontScaler.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".要素名").fontScaler({
target: ".要素名",
increment: 'variable',
containerclass: 'fontScaler'
});
});
</script>

あとは上記要素名でくくれば、+-の画像とともにフォント調整が可能になります。
また以下のようにすれば、通常通りサイズを指定することが可能です。
$(".要素名").fontScaler({
target: '.要素名',
containerclass: 'fontScaler',
store:true,
fixed: {
size1: '100', //サイズ小：デフォルト（指定なくともOK）
size2: '200', //サイズ中
size3: '300' //サイズ大
}
});

フォントサイズを調整するJavaScript「fontScaler」サンプル

記事作成：2009年09月16日

前の記事：画像を拡大させるJavaScript「JQuery.iviewer」
次の記事：friendfeedのストリームを表示するJavaScript「FriendFeed JSONP Widget」