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

JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイトでよく見かける、文字サイズ（大・中・小）。
文字サイズが変更できるとなんだかユーザビリティに配慮した気になれます。
JavaScriptライブラリの「jQuery」プラグインjQuery Text Resizer Pluginを使用して実現してみましょう。

使用方法
jQuery Text Resizer Pluginからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.textresizer.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
$(".class名 a").textresizer({
target: "id名" //フォントサイズを変更したい場所を指定
});
});
</script>

あとは上記で指定したclass名を記述すれば完成です。
<ul class="class名">
<li><a href="#">小</a></li>
<li><a href="#">中</a></li>
<li><a href="#">大</a></li>
</ul>

大きさは記述順に反映されます。
また、script内で文字サイズを指定できます。
<script>
$(function(){
$(".class名 a").textresizer({
target: "id名"
sizes: [ ".8em", "1em", "1.5em" ]
});
});
</script>

JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」サンプル

記事作成：2009年09月07日

前の記事：jQueryでtwitterタイムラインを表示するプラグイン「Tweetable -- A jQuery plugin」
次の記事：JavaScriptで画像の一部を拡大表示する「jLoupe」