フォントサイズを変更するjQueryのスクリプト

JavaScript

フォントサイズを変更するスクリプトを探していましたが、お気に召すものがなかなか見つかりませんでした。CSSを切り替えないタイプのものが欲しかったのですけれど。フォントサイズ変更用のCSS作るのもイヤだなと思いましてね。仕方ないので、最近チョコチョコと触りはじめたjQueryで作ってみました。でも汎用性は良くないし不具合もあるかもしれません。それにもっとスマートに書けるとも思います。でも今はこれが精一杯です。

Demo

※改修したものを公開していますのでよろしければCSS切替なしでフォントサイズを変更するjQueryのスクリプトをご覧下さい。

必要なファイル

コーディング＆設定

HTML

HTMLヘッダー内でjquery.js、jquery.cookie.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

#changeAreaでフォントサイズを変更する箇所をを囲み、フォントサイズ変更ボタンの記述をする。フォントサイズ変更ボタンの記述位置は#changeAreaの中でも外でもよい。

<div id="changeArea">
<!-- ここからはフォントサイズが変更される -->
<ul id="fontSize">
<li id="fontS"><img src="fontsize-s.gif" alt="小"></li>
<li id="fontM"><img src="fontsize-m.gif" alt="中"></li>
<li id="fontL"><img src="fontsize-l.gif" alt="大"></li>
</ul>
<!-- ここまではフォントサイズが変更される -->
</div>

JavaScript

以下のスクリプトを記述。

$(function(){

//フォントサイズ設定
	var FontSize = [];
	FontSize["S"] = 100;
	FontSize["M"] = 116;
	FontSize["L"] = 131;

//フォントサイズ変更ボタン設定
	var ChangeBtn = "#fontSize img";
	var SearchImg = ["#fontS img","#fontM img","#fontL img"];

//フォントサイズ変更関数
	function FontSizeSet(fs){
		$("#changeArea").css("font-size",fs+"%");
	};

//画像置換関数
	function OnFont(){
		$(this).attr("src",$(this).attr("src"));
	};
	function OvFont(io){
		$(io).attr("src",$(io).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_ov$2"));
	};
	function OffFont(io){
		$(io).attr("src",$(io).attr("src").replace(/^(.+)_ov(\.[a-z]+)$/,"$1$2"));
	};

//クッキー設定関数
	function FontCookie(ck){
		$.cookie("fontsize",ck,{path:'/',expires:7});
	};

//クッキー確認関数
	function CookieChack(fs){
		return $.cookie("fontsize")==fs;
	};

//ロード時表示設定
	function LoadFont(fs,si){
		FontSizeSet(FontSize[fs]);
		OvFont(SearchImg[si]);
	};
	if(CookieChack("fontS")){
		LoadFont("S",0);
	}
	else if(CookieChack("fontM")){
		LoadFont("M",1);
	}
	else if(CookieChack("fontL")){
		LoadFont("L",2);
	}
	else {
		FontCookie("fontS");
		LoadFont("S",0);
	};

//画像プリロード設定
	function ImgPreload(io){
		$(ChangeBtn).not(SearchImg[io]).each(function(){
			$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_ov$2"));
		});
	};
	if(CookieChack("fontS")){
		ImgPreload(0);
	}
	else if(CookieChack("fontM")){
		ImgPreload(1);
	}
	else if(CookieChack("fontL")){
		ImgPreload(2);
	};

//ホバーイベント
	$(ChangeBtn)
	.hover(
	function(){
		if(!$(this).attr("src").match("_ov")){
			OvFont(this);
		};
	},
	function(){
		if($(this).attr("src").match("_ov")){
			if(CookieChack("fontS")){
				OffFont(SearchImg[1]),OffFont(SearchImg[2]);
			}
			else if(CookieChack("fontM")){
				OffFont(SearchImg[0]),OffFont(SearchImg[2]);
			}
			else if(CookieChack("fontL")){
				OffFont(SearchImg[0]),OffFont(SearchImg[1]);
			};
		};
	});

//クリックイベント
	function ClickFont(ck,fs,io1,io2){
		FontCookie(ck);
		FontSizeSet(FontSize[fs]);
		OffFont(SearchImg[io1]),OffFont(SearchImg[io2]);
		OnFont();
	};
	$(SearchImg[0]).click(function(){
		ClickFont("fontS","S",1,2);
	});
	$(SearchImg[1]).click(function(){
		ClickFont("fontM","M",0,2);
	});
	$(SearchImg[2]).click(function(){
		ClickFont("fontL","L",0,1);
	});
});

※2010/8/10 上記スクリプトの記述を変更しました。

その他

ul li内の画像のロールオーバー＆アクティブ用画像（形式はなんでもOK）を用意し、ロールオーバー前の画像ファイル名の最後に_ovを追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。

（例）ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。

あとがき

今後もイロイロとやっていきたいと思います。たまたま訪れ、たまたま参考になったりした方がいたら幸いです。

Top