• かちびと.net

    設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizerのご紹介。クロスブラウザで動いてくれます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

設定も簡単・軽量(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>

で、マークアップ

<div id="control-wrap"></div>

これで、中に指定したセレクタの’ul#controls aに該当するボタンが配置されます。

以下でデモとスクリプトのダウンロードが可能ですよ。jQueryを使っているサイトなら導入を一考したいところです。

Font sizer

URL :
TRB :

Comments & Trackbacks (36)

  1. Aaron

    Thanks for the write up, I appreciate it.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services