フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。
CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。
フォントサイズを変える「大・中・小」ボタン実装
jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。
まずは仕様を考えてみましょう。
仕様
- ・大・中・小のボタンをクリックするとフォントサイズが変更される
- ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット
- ・CSSにあらかじめ各class用のフォントサイズを入れておく
- ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。
スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応してみます。
今回はサンプルなので、サンプル箇所だけのフォントサイズを変更しますが、サイト全体に適用の場合は、外枠に使っている要素（bodyや大外の枠にしている要素）などにclassが付くようにすれば全体のフォントサイズが変更されます。
全体に適用する際の注意ですが、個別にfont-sizeを着けていると適用されなかったり、うまくサイズが変更されなかったりもする場合がありますので、個別にCSSでfont-sizeをつけているところは要注意です。
さて、早速サンプルを作ってみましょう。
まずはHTMLから
HTML
<ul id="fontChange"> <li id="fontS">小</li> <li id="fontM">中</li> <li id="fontL">大</li> </ul>
今回はテキストの中身ですが、img画像などでもOK。今回はCSSでボタンっぽくカーソルも変化するように設定してあります。(cursor:pointer;)しかし、li:hoverというふうに今回しているので、IE6ではホバーの時だけうまく表示されないです（文字サイズ変更の動作だけのサンプルです。）
cookieをjQueryで簡単に扱うプラグインを使う
HTML面でもうひとつ準備しておくのが、cookieを簡単にあつかえるようにしているjQuery pluginの導入。これを入れて短いコードでcookieを扱うことができるので、今回はそれを使います。
ここからjquery.cookie.jsをダウンロードしてきて、jQueryと共にheader内で読み込んでおきます。
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/jquery.cookie.js"></script>
使い方はとっても簡単、
//cookieの読み込み $.cookie('保存名') //cookieの保存 $.cookie('保存名' , '値')
本当はもっと使い方は細かいのですが、ここでは省略。詳しい使い方は下記リンクにて。
Klaus Hartl - Stilburo : Cookie Plugin for jQuery
では、文字サイズ変更のコードを書きましょう。
JavaScript
jQuery(function($){
//変数にクッキー名を入れる
var history = $.cookie('fontSize');
//適用する箇所を指定。今回は部分的に#test内のpに
var elm = $('p','#test');
//変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
(!history)? elm.addClass('fontM'):elm.addClass(history);
//クリックしたら実行
$('li','#fontChange').click(function(){
//クリックした要素のID名を変数にセット
var setFontSize = this.id;
//クッキーに変数を保存
$.cookie('fontSize', setFontSize);
//一度classを除去して、変数をclassとして追加
elm.removeClass().addClass(setFontSize);
});
});
さて、これらを動作させてみましょう。
デモプレビュー
- 小
- 中
- 大
フォントサイズが変化します
■フォントサイズサンプル
- 小：サンプル表示
- 中：サンプル表示
- 大：サンプル表示
クリックする度に、classを変更しているので、それぞれのclassのスタイルが適用されるという仕組みです。
ちょっと解説
解説が必要かな？というところだけピックアップして解説します。
以前の変更があるかどうかのチェック
//変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用
(!history)? elm.addClass('fontM'):elm.addClass(history);
初めてサイトに訪問した場合は、以前のcookieなども残っているわけがないので、最初に変数にいれたhistoryの中身は空っぽになっています。その場合は標準サイズのfontMのclassをセットするようにします。
今回は三項演算子というのを利用して、if(…){〜}と同じような条件分岐をさせています。文字で書いてみると、「(条件文)?該当する場合の処理：該当しない処理;」というような処理が行われます。今回の場合条件が「(!history)?」となっています。これは最初に指定した変数「history」の中身があるかないかをみていて、中身が入っていない場合はfontMのclassを適用させ、中身が入っている場合はその中身をclassに適用させます。
今回のコードを使う場合のカスタマイズ
もし今回のコードを使う場合、そのままではis="test"内のp要素にしか適用されないので（$('p','#test')となっているので）この部分のカスタマイズは必須となります。
例えばbodyに適用させる場合は「$('body')」に修正します。するとbodyにclassがつくようになります。bodyでない場合は、その適用させたい要素をいれてください。
修正例１
var elm = $('#wrap');
修正例２
var elm = $('html');
別なコードも多々考えられます
今回はサンプルということで、簡単な例をご紹介しました。しかしこの方法では、特定の使い方に限定されているのと、適用エリアも限定されてしまうという欠点があります。急ぎサイトに組み込む…などの場合や最初に工数少なく導入というのであれば、今回ご紹介のようなコードでもいいと思うのですが、時間があるようでしたらプラグイン化なども視野にいれて汎用性を持たせてつくってみてはいかがでしょうか。
