jQueryでキャッシュを使った文字サイズ可変

久々のJavascriptの記事です。
jQueryで、キャッシュを使って文字サイズを可変にできるjavascriptです。
たまにクライアントからの要望で「文字サイズ可変にしてー」というのがきますがちょっと面倒なんだよねぇ~。
けど、今回ご紹介するJavascriptはとても簡単です!

jQueryはキャッシュ機能に対応した1.3.2以降を使用してください。
ちなみに1.5.2でトライしてみたらイケました。(現在の最新版は1.6のようです)
ちょっと理解すれば設置、カスタマイズはごく簡単。

まずはこちらでダウンロード。
http://angstrey.com/index.php/projects/jquery-text-resizer-plugin/

<head>タグ内に以下を記述します。
※以下の例はcommon/js/フォルダに格納した場合で記述しています。

<script type="text/javascript" src="common/js/jquery.textresizer.js"></script>
<script type="text/javascript" src="common/js/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
	$("ul.fsChange a").textresizer({
		target: "#content",
		sizes: [ "75%", "93%" ]
	});
});
</script>

targetは文字サイズのサイズ変更を適用するdivのid名を入れます。
sizesは小・中・大という順番でボタンを設置した場合、htmlで記述したときの上からの順番で記述します。

以下は、「中」と「大」のみの場合です。

<ul class="fsChange">
<li><a href="#">中</a></li>
<li><a href="#">大</a></li>
</ul>

僕の場合はいつも、div#contentにfont-size: 75%;を効かせているので、
div#contentに対して、「中」が75%で平常時と同じ値を入れて、「大」の時に93%を効かせています。

ulのクラス名の「fsChange」は変更可能です。
自分で任意のクラス名を設定したい場合は、
$(“ul.fsChange a”).textresizer({
と、
<ul class=”fsChange”>
の「fsChange」を同じものに変更してください。

このJSの便利なところは

  • 数値の設定が楽であること(※全てのHTML内に記述するのは面倒なので外部ファイル化した方がいいかもしれない)
  • ある程度の数、数値を増やせること。サイズ「極小」「小」「中」「大」「極大」とかできるっぽい。

CSSでfont-sizeを指定してるタグを把握したサイトであれば、すごく簡単なので是非使ってみてください。
※font-sizeをメチャクチャ&ゴチャゴチャに指定しているサイトでも、サイズ指定の単位をpxにすれば割と楽かもしれません。

【文字サイズ可変によるデザインの問題】
文字サイズを大きくした状態でもサイトの見栄えをチェックしていないと、
予期しない改行が入ったり、リストマークの位置がズレまくったりと、
ヒドイ状態になるかもしれないので、その辺りにこだわる方はきちんと文字サイズが大きい時も確認しておくことをおすすめします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA