ページ内のフォントサイズを変更してくれる「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プラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。シン

: カウントダウンプラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

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

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

: 画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな～と思い試してみました。ナビゲーション内にサムネイルを

: 表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能サムネイルナビゲーション複数表示

: レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

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

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

: 要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

: iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロードスクリプト実装

: タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。デフォルトでは、768