フォントサイズを変更するjQueryのスクリプト
フォントサイズを変更するスクリプトを探していましたが、お気に召すものがなかなか見つかりませんでした。CSSを切り替えないタイプのものが欲しかったのですけれど。フォントサイズ変更用のCSS作るのもイヤだなと思いましてね。仕方ないので、最近チョコチョコと触りはじめたjQueryで作ってみました。でも汎用性は良くないし不具合もあるかもしれません。それにもっとスマートに書けるとも思います。でも今はこれが精一杯です。
※改修したものを公開していますのでよろしければ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というファイル名にする。
あとがき
今後もイロイロとやっていきたいと思います。たまたま訪れ、たまたま参考になったりした方がいたら幸いです。