jQuery：文字サイズ変更プラグイン「Text Resizer」

てっちゃん
てっちゃん

ページに文字サイズを変更するボタンをつけることってありますよね！
そんなときに簡単に設置できるjQueryプラグイン「Text Resizer」をご紹介します
cookie対応なので、ページ移動しても設定を保持してくれますよ

デモページ

Step01：ファイルのダウンロード

今回はjQueryなので、本体をダウンロードしておいてください！

GitHubからjquery.textresizer.jsとjquery.cookie.jsをダウンロードしてきます
【GitHub：jquery-textresizer】
https://github.com/mariojvargas/jquery-textresizer

Text Resizer

Step02：設置

ダウンロードしてきたjQuery本体とjquery.textresizer.jsとjquery.cookie.jsを<head>～</head>内で読み込みます。

ファイルのパスは任意です。都度変更してください。

<head>～</head>内

<script src="common/js/jquery-xxxx(本体).js"></script>
<script src="js/textresizer/jquery.textresizer.js"></script>
<script src="js/textresizer/jquery.cookie.js"></script>
<script type="text/javascript">
jQuery(document).ready( function(){
	jQuery(".fontsize a").textresizer({
		target: "#contents",		// 可変させるエリア
		sizes:  [ "1.2rem", "1.6rem", "2.0rem" ],	// フォントサイズ
	});
});
</script>

コンテンツ内

<ul class="fontsize">
	<li><a href="javascript:void(0)" title="Small">小</a></li>
	<li><a href="javascript:void(0)" title="Medium">中</a></li>
	<li><a href="javascript:void(0)" title="Large">大</a></li>
</ul>
<div id="contents">～～～可変するエリアです～～～<div>

デモページ

これでフォントサイズ「小」「中」「大」ボタン設置完了です！

関連記事