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

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

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

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

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

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

no image

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

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

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

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

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

Comment

Message

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

*

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

PAGE TOP ↑