7

9月

2010

任意の部分の文字サイズをクリックで切り替えるjQueryプラグイン「fontScaler」実装

fontScaler個人で運営しているブログだったら文字サイズなんて運営者の好みでいいと思うんですけど、幅広い年齢層をターゲットとしているポータルサイトやネットショップなんかには文字サイズを切り替える機能があった方がいいんじゃないかな~。

今回紹介する「fontScaler(フォント・スケーラー)」は、”コンテンツ部分のみ”など部分的に文字を拡大縮小したい人にぴったりのスクリプトです。

CSSの指定次第でいろいろと応用が利きそうだし、実装は割と簡単。

まずはjQueryを含めた一式ダウンロード。

fontScaler

解凍すると「jquery.fontScaler.v0.2」というフォルダが出来上がるので、「fontScaler」とでもフォルダ名を変更しておいて、それをサーバーに丸ごとアップロード。

fontScalerを使用したいページのヘッダに以下を記入。

<link rel="stylesheet" type="text/css" href="サイトURL/fontScaler/style/jquery.fontSizer.css" media="screen" />
<style type="text/css">
	div.fontScalerFixed p,
	div.fontScalerVariable p {
		clear: both;
		font-size: 1.5em;
		line-height: normal;
	}
</style>
<script type="text/javascript" src="サイトURL/fontScaler/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="サイトURL/fontScaler/jquery.fontScaler.js"></script>
  • サイトURLはアップロードしたURLを記述。
  • このスクリプトで使用するプロパティのCSSを追加(緑文字部分)。
    font-sizeはお好きなサイズでどうぞ。ただし相対サイズのemか%で指定すること。

切り替え方法は、2種類のパターンから選択。

大中小、3段階の切り替え【fontScalerFixed】

先程ヘッダに記述したものの下に、以下を挿入。
size2,size3っていうのは元のサイズからの拡大率。
下のサンプルは中サイズ120%と大サイズ150%を指定。

<script type="text/javascript">
	$(document).ready(function() {
		$(".fontScalerFixed").fontScaler({
		target: '.fontScalerFixed',
			containerclass: 'fontScaler',
			store:true,
			fixed: {
				size2: '120',
				size3: '150'
			}
		});
	});
</script>

表示させるためのHTML

<div class=”fontScalerFixed”>の中の<p>で囲む。

<div class="fontScalerFixed">
	<p>この部分の文字サイズが可変</p>
</div>

実装サンプル

これは実装サンプルです。
ボタンをクリックするだけで読みやすい文字サイズに変更することができる、ユーザーに配慮した機能です。
選べるサイズは3種類。

好きなサイズを選べる【fontScalerVariable】

<script type="text/javascript">
	$(document).ready(function() {
		$(".fontScalerVariable").fontScaler({
			target: ".fontScalerVariable",
			increment: 'variable',
			fx: 'smooth',
			containerclass: 'fontScaler'
		});
	});
</script>

表示させるためのHTML

<div class=”fontScalerVariable”>の中の<p>で囲む。

<div class="fontScalerVariable">
	<p>この部分の文字サイズが可変</p>
</div>

実装サンプル

これは実装サンプルです。
ボタンをクリックするだけで読みやすい文字サイズに変更することができる、ユーザーに配慮した機能です。
アホみたいなサイズまで拡大できます。

CSSがある程度わかる人なら、かなり応用範囲の広いスクリプトじゃないかな~と思います。

コメント

  • サイトウリュータ

    この記事へのコメントはまだありません。ご意見やご感想をコメントしていただけるとうれしいです。
    投稿後、すぐには反映されませんのでご了承ください。

コメントフォーム




サイトウリュータ

カテゴリ

最近の記事

注目の記事

Follow me