ページ内のフォントサイズを変更してくれる「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

: マウスオーバーでキャプション表示してくれるプラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

: Lightboxプラグイン「Boxer」

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

: jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。目次凡例を表示凡例の位置 [location, placement] 凡例のフォ

: 色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。カルーセル・スライダー・ギャラリーなど一通り実装可能です。ダウンロード本家デモ

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

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