CSS切替なしでフォントサイズを変更するjQueryのスクリプト

2011/2/11 01:25

前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。~~ちなみにプラグイン風？に作りました。もちろん自己満の為です。~~

画像タイプDemo

テキストタイプDemo

対応ブラウザ

Google Chrome
Safari4~
Firefox3~
Internet Explorer6~
Opera11

※Windowsのみの確認です。
※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンクじゃないのにa要素を使うの嫌だった個人的に身勝手な考えの為です。（反論意見求む）

必要なファイル

※2012/4/7 jquery.cookie.jsがダウンロード出来なくなっていましたので、リンク先を変更しました。

コーディング＆設定

HTML

head要素内でjquery.js、jquery.cookie.jsを読み込む。

ディレクトリは任意です。

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

body要素内で以下の様に記述。

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

id名、class名、ボタンの数等は変更可。（合わせてJavaScriptの変更も必要）

画像タイプ

<ul id="fontSize">
	<li><img class="changeBtn" src="sample-s.gif" alt="小"></li>
	<li><img class="changeBtn" src="sample-m.gif" alt="中"></li>
	<li><img class="changeBtn" src="sample-l.gif" alt="大"></li>
</ul>

<div id="changeArea">
<!-- ここからはフォントサイズが変更される -->
	<p>テキストテキストテキストテキストテキスト</p>
<!-- ここまではフォントサイズが変更される -->
</div>

テキストタイプ

<ul id="fontSize">
	<li class="changeBtn">小</li>
	<li class="changeBtn">中</li>
	<li class="changeBtn">大</li>
</ul>

<div id="changeArea">
<!-- ここからはフォントサイズが変更される -->
	<p>テキストテキストテキストテキストテキスト</p>
<!-- ここまではフォントサイズが変更される -->
</div>

JavaScript

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

~~4、10～15~~9～16行目をHTMLや仕様に合わせて変更。

(function($){

	$(function(){
		fontsizeChange();
	});

	function fontsizeChange(){

		var changeArea = $("#changeArea");			//フォントサイズ変更エリア
		var btnArea = $("#fontSize");				//フォントサイズ変更ボタンエリア
		var changeBtn = btnArea.find(".changeBtn");	//フォントサイズ変更ボタン
		var fontSize = [100,116,131];				//フォントサイズ（HTMLと同じ並び順、幾つでもOK、単位は％）
		var ovStr = "_ov";							//ロールオーバー画像ファイル末尾追加文字列（ロールオーバー画像を使用しない場合は値を空にする）
		var activeClass = "active";					//フォントサイズ変更ボタンのアクティブ時のクラス名
		var defaultSize = 0;						//初期フォントサイズ設定（HTMLと同じ並び順で0から数値を設定）
		var cookieExpires = 7;						//クッキー保存期間
		var sizeLen = fontSize.length;
		var useImg = ovStr!="" && changeBtn.is("[src]");

		//現在クッキー確認関数
		function nowCookie(){
			return $.cookie("fontsize");
		}

		//画像切替関数
		function imgChange(elm1,elm2,str1,str2){
			elm1.attr("src",elm2.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-z]+)$"),"$1"+str2+"$2"));
		}

		//マウスアウト関数
		function mouseOut(){
			for(var i=0; i<sizeLen; i++){
				if(nowCookie()!=fontSize[i]){
					imgChange(changeBtn.eq(i),changeBtn.eq(i),ovStr,"");
				}
			}
		}

		//フォントサイズ設定関数
		function sizeChange(){
			changeArea.css({fontSize:nowCookie()+"%"});
		}

		//クッキー設定関数
		function cookieSet(index){
			$.cookie("fontsize",fontSize[index],{path:'/',expires:cookieExpires});
		}

		//初期表示
		if(nowCookie()){
			for(var i=0; i<sizeLen; i++){
				if(nowCookie()==fontSize[i]){
					sizeChange();
					var elm = changeBtn.eq(i);
					if(useImg){
						imgChange(elm,elm,"",ovStr);
					}
					elm.addClass(activeClass);
					break;
				}
			}
		}
		else {
			cookieSet(defaultSize);
			sizeChange();
			var elm = changeBtn.eq(defaultSize);
			if(useImg){
				imgChange(elm,elm,"",ovStr);
				imgChange($("<img>"),elm,"",ovStr);
			}
			elm.addClass(activeClass);
		}

		//ホバーイベント（画像タイプ）
		if(useImg){
			changeBtn.each(function(i){
				var self = $(this);
				self.hover(
				function(){
					if(nowCookie()!=fontSize[i]){
						imgChange(self,self,"",ovStr);
					}
				},
				function(){
					mouseOut();
				});
			});
		}

		//クリックイベント
		changeBtn.click(function(){
			var index = changeBtn.index(this);
			var self = $(this);
			cookieSet(index);
			sizeChange();
			if(useImg){
				mouseOut();
			}
			if(!self.hasClass(activeClass)){
				changeBtn.not(this).removeClass(activeClass);
				self.addClass(activeClass);
			}
		});

	}

})(jQuery);

※2011/2/27 エラーが起きていましたので上記スクリプトを修正しました。

※2011/2/26 上記スクリプトの記述を変更しました。

その他

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

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

あとがき

今回は初のプラグイン風？に作ってみました。プラグイン作れるっていうと、なんかカッコイイなっていう勝手なイメージがありまして。でも結果的にプラグインとして堂々と配布するほどの自信がないので、プラグイン形式で作っているのにその意味を成していないような変なつくりになりました。でもまーコピペで使いやすいのでコレでいいかなとは思っていますがね。

プラグイン風に作っていましたが、修正する際にあまりに意味がないと思いついでにプラグイン風をやめました。うん。こっちの方がいい気がする。

Comment

小林と申します

2011/2/22 16:38

はじめまして。いつも参考にさせていただいてます。
非常に分かりやすい説明と端的なソースで、プログラムに疎い私でも何とかjQueryを活用できています。
『CSS切替なしでフォントサイズを変更するjQueryのスクリプト』についてですが、画像使用ヴァージョンについて質問があります。
初期の状態で「小」「中」「大」ボタンの「中」ボタンをアクティブ状態にし、尚且つ画像もアクティブ時の画像にしたいのですが、どのように設定すれば良いのかご教授いただけませんでしょうか？

単純にHTMLのソース上でアクティブ時の画像を置いても表示されませんよね？

急な質問で大変恐縮ではありますが、
どうぞ宜しくお願いいたします。

また、こういった質問にはお応え出来ないということであれば、その旨お伝えいただければ幸いです。

syuji

2011/2/22 20:16

はじめまして、小林さん。
活用されているとのことで、お役に立ててうれしいかぎりです。

さて、フォントサイズ初期状態の設定を変更する方法についてですが、指定の変更箇所にありませんでしたね。たしかにこの設定はあった方が便利ですね。

ということでスクリプトを修正しました。ついでにイロイロ修正しましたので、スクリプトだけガラっと入れ替えて下さればと。ちなにに15行目の設定でフォントサイズの初期状態を変更できます。

多分これで問題ないかと思われます。

コメントを頂いたお陰で前より良くなったと思います。
ありがとう御座います。

Tomomi

2011/5/27 11:02

初めまして
文字サイズ変更に、色をつけたくていろいろ探し、こちらにたどりつきました
まさにやりたかったことで、早速使ってみようとしたのですが、Chromeでだけなぜか動かないのです…
jQuery v1.4.2
Chrome v11.0.696.71
です
バージョンの問題なのでしょうか？？

Tomomi

2011/5/27 11:08

さきほど、Chromeで文字サイズが変更にならない件でコメントした者です
申し訳ありません…Chromeはローカルではクッキーを作れないと知らず、一生懸命ローカルでテストしていました
サーバーで確認したら動きました！
確認不足で申し訳ありませんでした