ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.jsを使用して設定はCookieに保持され、次回訪問時にも設定が引き継がれて表示してくれます。デモ

スクリプト

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.textresizer.js" type="text/javascript"></script>

実装

// リサイズ用リンクボタン
<div id="textsizer">
    <p>文字サイズ:<p>
    <ul class="textresizer">
        <li><a href="#">S</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">L</a></li>
        <li><a href="#">XL</a></li>
    </ul>
</div>

// 対象要素
<div id="div815">
テキスト
</div>

<script type="text/javascript">
jQuery(document).ready( function() {
    jQuery( "#textsizer a" ).textresizer({
        target: "#div815",                       // 対象要素
        type: "fontSize",                        // サイズ指定方法
        sizes: [ "11px", "13px", "15px", "17px"],// フォントサイズ
        selectedIndex: 1                         // 初期表示
    });
});
</script>

リサイズ用のボタンのスタイルは本家サイトのものそのままです。

<style>
ul.textresizer {
	list-style: none;	display: inline;	margin: 0px;	padding: 0px;
}
ul.textresizer li {
	display: inline;	margin: 0px;	margin-right: 5px;	padding: 0px;
}
ul.textresizer a {
	border: solid 1px #999;	padding: 2px 3px;	font-weight: bold;	text-decoration: none;
}
ul.textresizer a:hover {
	background: #e5e5e5;	border: solid 1px #cccccc;
}
ul.textresizer .small-text {
	font-size: 11px;
}
ul.textresizer .medium-text {
	font-size: 13px;
}
ul.textresizer .large-text {
	font-size: 15px;
}
ul.textresizer .larger-text {
	font-size: 17px;
}
/* Style of active button */
ul.textresizer a.textresizer-active {
	border: solid 1px #2B562B;	background: #FFCA6F;	color: #000000;
}
/* End of Text Resizer Buttons */
</style>

他プラグイン
jFontSize 　Font Sizer

: エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロードエフェクトには、fade/slide/typingの3つが可能です。デ

: Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。モバイル環境にも最適化されていて、#レスポンシブ対応で、#スワイ

: テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

: Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプトダウンロード / サイト

: 数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモスクリプト実装既存のテキストボックスにclas

: Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。ダウンロード | デモスクリプト実装文字数・単語数のカウント表

: テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点チェックまで限定してくれます。ダウンロードスクリプト

: [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。ダウンロードはこちらデモスクリプト

: select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら