jQueryでクッキーを使ったフォントサイズ変更の方法。

2010.05.16 / Notes

jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。

font-small.css
font-default.css
font-large.css

font-small.css

font-default.css

font-large.css

次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。

$(document).ready(function() {
	
	//フォントサイズ用のCSSファイル名
	var css_default = "font-default.css";
	
	//クッキーから読み込んで、現在のCSSファイルを設定
	var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;
	
	//フォントサイズ用CSSのリンク
	var link = $("link[href="+css_default+"]");
	
	//リンクのhref属性に現在のCSSファイルを読み込み
	link.attr("href", css_current);
	
	//クリックされたサイズに変更して、クッキーに書き込み
	$("ul#font-size li").click(function() {
    	css_current = "font-"+$(this).attr("class")+".css";
		link.attr("href", css_current);
        $.cookie("css", css_current, {expires:1});
    });
});

$(document).ready(function() {

//フォントサイズ用のCSSファイル名

var css_default = "font-default.css";

//クッキーから読み込んで、現在のCSSファイルを設定

var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;

//フォントサイズ用CSSのリンク

var link = $("link[href="+css_default+"]");

//リンクのhref属性に現在のCSSファイルを読み込み

link.attr("href", css_current);

//クリックされたサイズに変更して、クッキーに書き込み

$("ul#font-size li").click(function() {

css_current = "font-"+$(this).attr("class")+".css";

link.attr("href", css_current);

$.cookie("css", css_current, {expires:1});

});

<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。

<link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="font-default.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。

<ul id="font-size">
<li class="small">small</li>
<li class="default">default</li>
<li class="large">large</li>
</ul>

<li class="small">small</li>

<li class="default">default</li>

<li class="large">large</li>

</ul>