jQuery：文字サイズを変更するボタン

だま
だま

たまに実装する事がある文字サイズ変更ボタンのメモです。

  • 文字サイズは標準と大の二段階のみ作成しています。
    もっと細かく増減したい場合は条件分岐を増やしてください。
  • 文字サイズが変更された時、class="on"を付け外ししてボタン色を変更します。
    また、現在の文字サイズを判定してダイアログを表示します。
  • デモでは使用していませんが、一緒にline-heightの値も変更してあげると文字サイズが大きくなった時に読みやすくなります。
  • デモでは使用していませんが.ver2、「textSize」の値をcookieに保存して呼び出せばページ遷移後も文字サイズの変更を引き継ぐ事ができます。
    class="on"の付け外しをページ読み込み時の処理に入れることで、ボタン色の変更も引き継ぎます。

デモページ

html

<dl class="textSize">
     <dt>文字サイズ</dt>
     <dd class="textLarge on">大きくする</dd>
     <dd class="textDefault">標準に戻す</dd>
</dl>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。<br>
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

jQuery

$(function(){
    //デフォルトの文字サイズ
    textSize="160%";
    font_largesmall(textSize);
    $(".textLarge").on('click keypress',function (){
    //「大きくする」ボタンをクリックした時
      if (textSize == "200%") {
         //現在の文字サイズが最大だったら
         m = escape("これ以上文字のサイズを大きくできません。");
         alert(unescape(m));
      } else {
         //現在の文字サイズが標準だったら
         textSize="200%";
         font_largesmall(textSize);
      }
    });
    $(".textDefault").on('click keypress',function (){
      //「標準に戻す」ボタンをクリックした時
      if (textSize == "160%") {
         //現在の文字サイズが標準だったら
         m = escape("現在標準サイズです。");
         alert(unescape(m));
      } else {
         //現在の文字サイズが標準以外だったら
         m = escape("文字のサイズを元に戻しますか？");
         alert(unescape(m));
         textSize="160%";
         font_largesmall(textSize);
      }
    });
    function font_largesmall(size) {
      if (size == "200%") {
         //文字サイズが最大だったら
         $("body").css("font-size",size);
         //ボタンの色を変更
         $(".textLarge").removeClass("on");
         $(".textDefault").addClass("on");
      } else {
         //文字サイズが標準だったら
         $("body").css("font-size",size);
         //ボタンの色を変更
         $(".textDefault").removeClass("on");
         $(".textLarge").addClass("on");
      }
    }
 });

関連記事