一時期、ヘッダー右上あたりに「文字・大・中・小」ってやつが増えましたよね。
ユーザビリティでの設置であれば、「小」は、いらないだろって思いますが。
老眼世代向けに「標準」＋「大」あたりで良いかも。
でも、タイトルまわりを画像文字にしているサイトが多いので
その場合は、あまり威力を発揮できないかも（汗）・・・・。
基本的には、ボディ文章は少し大きめの14px位を基準にして、拡大で128%位にもっていくのが良いかな．．．なんて思ってます。
フォントサイズ切り替えのサイト作成であれば、可能な限りタイトル周りもテキストにするのがユーザビリティの本筋だと思います。
（DIVの背景等に制約が多くなっちゃいますけどね。）
そんなこんなで、設置方法ですが
大きく分け２通りあります。
ひとつはCSSで切り替える。
（文字大中小ボタンがcssの切り替えボタン）
もうひとつがjQuery等のjsを使うパターン。
（functionで領域内のテキストサイズを変化させる）
今回は二つとも説明します。
css切り替えの方は、簡単に説明すると
文字大中小の3パターンのcssを書いて、ボタンで切り替える方法。
ただ、この場合は、フォントサイズを可変させたいid、class全部を３通り書くことになるんで
使用するセレクタが多いと大変面倒な作業になります。
シンプル構成サイト向きってところでしょうか。
たとえば
a_sample.cssに
.copy {
font-size:14px;
color:red;
}b_sample.cssに
.copy {
font-size:18px;
color:red;
}c_sample.cssに
.copy {
font-size:21px;
color:red;
}と記載するイメージです。
スタイルシートの切り替えは「styleswitcher.js」等を使います。
ココから「styleswitcher.js」をダウンロード。
ページの下の方にあるDownload styleswitcher.js というところからダウンロードできます。
head内記述は
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> //共通css
<link rel="alternate stylesheet" type="text/css" href="css/a_sample.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="css/b_sample.css" title="standard" />
<link rel="alternate stylesheet" type="text/css" href="css/c_sample.css" title="large" />
<script type="text/javascript" src="js/styleswitcher.js"></script>
※切り替えるcssのrel属性は”alternate stylesheet”です。
で、htmlのお好きな場所に切り替えボタンを設置。
<ul>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('small'); return false;">小</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('standard'); return false;">中</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('large'); return false;">大</a></li>
</ul>
onclickイベントでcssを切り替えます。
切り替えボタンは共通cssでお好きなデザインを施してください。
以上です。
サンプルはこちら
つぎに、jQueryのライブラリを使って指定範囲のフォントサイズを一気に切り替える方法。
これは、syujiさん作のソース、このサイトに詳しく出ていますが、私もこの方法が良いかなと思います。
まず、jquery.jsとcookieを扱うjquery.cookie.jsを入手
jquery.cookie.jsはここにあります。
jquery.js（本体）はどこにでもころがってますが
いまはGoogleのCDN サービスが便利です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
とか書いとけば勝手にバージョンアップしてくれるしね。
headで読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
その上で、フォントチェンジのjsを作成
(function($){
$(function(){
fontsizeChange();
});
function fontsizeChange(){
var changeArea = $("#changeArea"); //フォントサイズ変更エリア
var btnArea = $("#fontSize"); //フォントサイズ変更ボタンエリア
var changeBtn = btnArea.find(".changeBtn"); //フォントサイズ変更ボタン
var fontSize = [86,100,128]; //フォントサイズ（HTMLと同じ並び
順、幾つでもOK、単位は％）
var ovStr = "_ov"; //ロールオーバー
画像ファイル末尾追加文字列（ロールオーバー画像を使用しない場合は値を空にする）
var activeClass = "active"; //フォントサイズ変更ボタ
ンのアクティブ時のクラス名
var defaultSize = 1; //初期フォントサイズ設定
（HTMLと同じ並び順で0から数値を設定）
var cookieExpires = 2; //クッキー保存期間
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);
好きな名前をつけてheadで読み込みます。
たとえば
<script src="jquery.font.js" type="text/javascript"></script>
で、htmlのお好きな場所に切り替えボタンを設置。
<ul id="fontSize">
<li class="changeBtn">小</li>
<li class="changeBtn">中</li>
<li class="changeBtn">大</li>
</ul>
ボタンを画像にする場合は
<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>
オンマウスで画像を変化させる場合は
ファイル名に「_ov」を追加。
たとえば、ロールオーバー前の画像がsample-s.gifならsample-s_ov.gifというファイル名にする。
jsのオプション指定と連動しているんで、もし何らかの事情で「_ov」の文字列を変更する場合はjs内記述も変更すること。
あとは、可変させたいエリアを
<div id="changeArea">
～
</div>
で囲む。
<ul id="fontSize">
<div id="changeArea">
の各セレクタはさっき作成したjsにあわせてるんで
名前が気にくわなかったら変更可ですが、jsとhtmlで一致させてください。
あと、フォントの拡大縮小割合もjsの９行目を変更してください。
デフォルト設定やクッキーの保存期間もjsの上部で変更です。
なぜ、クッキーを設定するかというと
前回来訪した人が「文字大」でサイトを閲覧した場合、次に来場したときもデフォルトで「大」にするためです。
以上になります。
サンプルはこちら
