ページ内のフォントサイズを変更してくれる「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
  • このエントリーをはてなブックマークに追加

関連記事

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

no image

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

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

no image

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

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

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

Lightboxプラグイン「Boxer」

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

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

Comment

Web制作で使えた!jQueryプラグインまとめ+起業しました | コムテブログ にコメントする コメントをキャンセル

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑