【jQuery】フォントサイズ変更

by tea4two

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<ul id="textsize">
    <li class="btn01"><a href="#">ボタン小</a></li>
    <li class="btn02"><a href="#">ボタン中</a></li>
    <li class="btn03"><a href="#">ボタン大</a></li>
</ul>

<p>
    私は今どうもその演説者としてもののためでしありた。どうも絶対に評価打は今にどんな妨害ますませまでからはまるてならたがは意味したでが、いっそにはありたないたでし。人を云いますものはいったい事実にもしたないた。

どうしても岡田さんに発展人間全く交渉の上げるなかっ通りこういう態度私か約束にという今活動ませないたでと、その場合は私か当人兄がふらしば、嘉納さんののを部分のそれを無論同所有とできるば私家族がおまごまごから集まっように同時にご安心で指すたたて、なおよく返事が聞いましからいたつもりへ誘き寄せるだべき。あるいはそれならお道より聞えるつもりはさらに肝心と出かけなば、その模範をは信じますてって腰へあるてくるでした。その時賞のところその日数は私ごろにあったかと大森さんをいうべきです、一般の今日ですによってご所有ですたませて、三つの日が足を以前ほどの味に一遍ありがいて、どうの生涯を掘りてこういう上をどうしても云いましたと懸で事でて、なしないたてああ同陰立つた事ないますた。
</p>

CSS

#textsize li {
    display: inline;
}
#textsize li a.current {
    color: red;
    font-weight: bold;
}

JavaScript

$(function() {
    
    
    /* フォントサイズ変更(jquery.cookie.jsと併用)
	----------------------------------*/
	// フォントサイズ(px指定)
	var SMALL = 12; //small font
	var MEDIUM = 14; //default font
	var LARGE = 16; //larger font
	var COOKIE_NAME = 'mebiusTextResizer';//フォントサイズ変更のCOOKIE名
	
	//デフォルトフォントサイズ代入
	var fontsize = MEDIUM; 
	
	
	// 初期COOKIEチェック。あればそれを。なければデフォルトのフォントサイズ。
	if($.cookie(COOKIE_NAME)) {
		//ある
		fontsize = $.cookie(COOKIE_NAME);
		
		$('body').css('font-size', fontsize + 'px');
		if(fontsize == SMALL) {
			$('.btn01').toggleClass('active');
		} else if(fontsize == MEDIUM) {
			$('.btn02').toggleClass('active');
		} else if(fontsize == LARGE) {
			$('.btn03').toggleClass('active');
		}
	} else {
		//なし
		$('.btn02').addClass('active');
		$.cookie(COOKIE_NAME, fontsize);
	}
	
	// 大フォント
	$('.btn03').on('click', function() {
		fontsize = LARGE;
		$('body').css('font-size', fontsize + 'px');
		$('#textsize a').removeClass('active');
        $(this).addClass('active');
		$.cookie(COOKIE_NAME, fontsize);

		return false;	
	});
	
	// 中フォント
	$('.btn02').on('click', function() {
		fontsize = MEDIUM;
		$('body').css('font-size', fontsize + 'px');
		$('#textsize a').removeClass('active');
        $(this).addClass('active');
		$.cookie(COOKIE_NAME, fontsize);

		return false;	
	});
	
	// 小フォント
	$('.btn01').on('click', function() {
		fontsize = SMALL;
		$('body').css('font-size', fontsize + 'px');
		$('#textsize a').removeClass('active');
        $(this).addClass('active');
		$.cookie(COOKIE_NAME, fontsize);

		return false;	
	});
    
});