• 大
• 中
• 小

文字サイズ変更ボタンには特定のクラスを付与してください。

文字大：.large
文字中：.medium
文字小：.small

文字サイズを変更したい箇所に
.cngSize
を付与させてください。

$(function(){

 // どこを文字サイズ変更の対象にするのか
 var cngSize = $('.cngSize'),
   nowSize = "medium",
   cookieSize = $.cookie('nowSize');

 // 初期値設定
 if(cookieSize != undefined)
 {
  // クッキーに値がある場合
  $('.'+cookieSize).addClass('on');
  cngFontSize(cookieSize);
  nowSize = cookieSize;
 }
 else
 {
  // クッキーに値が無い場合
  $('.medium').addClass('on');
  cngFontSize('medium');
  nowSize = "medium";
 }

 //--------------------------------------------------------------------------
 // 各種クリックイベント
 //
 // 共通動作
 // 　1:前回変更された大きさと今変更しようとしている大きさと同じの場合は動作終了
 // 　2:クッキーへ現在の大きさを渡す
 // 　3:大中小ボタンの切替(前回分をノンアクティブにし、今回のをアクティブにする)
 // 　4:前回変更判別用変数に値を入れる
 // 　5:文字サイズの変更処理の実行
 //
 //--------------------------------------------------------------------------
 $('.large').bind('click',function ()
  {
   if(nowSize == "large") return false;
   $.cookie('nowSize', 'large', {path: '/'});
   btnCng(nowSize,this);
   nowSize = "large"
   cngFontSize(nowSize);
  }
 )
 $('.medium').bind('click',function ()
  {
   if(nowSize == "medium") return false;
   $.cookie('nowSize', 'medium', {path: '/'});
   btnCng(nowSize,this);
   nowSize = "medium"
   cngFontSize(nowSize);
  }
 )
 $('.small').bind('click',function ()
  {
   if(nowSize == "small") return false;
   $.cookie('nowSize', 'small', {path: '/'});
   btnCng(nowSize,this);
   nowSize = "small";
   cngFontSize(nowSize);
  }
 )


 function cngFontSize(sizeName)
 {
  switch(sizeName)
  {
   case 'large':
    cngSize.css('font-size','150%');
    break;
   case 'medium':
    cngSize.css('font-size','100%');
    break;
   case 'small':
    cngSize.css('font-size','50%');
    break;
  }
 }

 function btnCng(nowSize,self)
 {
  $('.'+nowSize).removeClass('on');
  $(self).addClass('on');
 }

});