企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQueryプラグインjQuery Text Resizerを使えば手軽に実装できます。
また、jQuery Cookieと併用することで、現在のフォントサイズ（の状態）を Cookie に保持できるので、サイト内の別ページへ遷移したりページを離脱してもう一度戻ってきた場合でもサイズを維持することができます。
jQuery Text ResizerとjQuery Cookieのダウンロード
以下のページより、jQuery Text Resizer Pluginファイルをダウンロードします。http://angstrey.com/index.php/projects/jquery-text-resizer-plugin
jQuery Cookieはこちら。
jQuery Cookie
jQuery Text ResizerとjQuery Cookieの設置
jquery.textresizer.jsとjquery.cookie.jsをjqueryファイルと一緒に<head>内に設置します。|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript" src="/jquery.min.js"></script> <script type="text/javascript" src="/jquery.cookie.js"></script> <script type="text/javascript" src="/jquery.textresizer.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsize a" ).textresizer({ target: "#contents", type: "cssClass", sizes: [ "f1", "f2" ,"f3" ] }); }); </script> |
オプション
target:で文字サイズ変更の領域（対象要素）を指定します。また、
type:にはfontSizecssClasscssの3種類あり、それぞれsizes:に指定する値が異なります。type:”fontSize”
type:"fontSize"の場合、sizesにはフォントサイズを直接指定します。シンプルで分かりやすいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsize a" ).textresizer({ target: "#contents", type: "fontSize", sizes: [ "10px", "12px", "14px" ] }); }); </script> |
type:”cssClass”
type:"cssClass"の場合、sizesはクラス名になります。CSSでレイアウト制御しやすいのでオススメです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsize a" ).textresizer({ target: "#contents", type: "cssClass", sizes: [ "f1", "f2", "f3" ] }); }); </script> |
type:”css”
type:"css"の場合、sizesには スタイルを直接書きます。ベタ書きになるので個人的にはあまりオススメしません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsize a" ).textresizer({ target: "#contents", type: "css", sizes: [ {"font-size":"80%"}, {"font-size":"100%"}, {"font-size":"120%"} ] }); }); </script> |
HTMLの記述例とサンプル
オプションで指定したtarget:"#contents"の範囲に対して文字サイズの変更が適用されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id"contents"> <ul id="textsize"> <li><a href="javascript:void(0)" class="f1" >小</a></li> <li><a href="javascript:void(0)" class="f2" >中</a></li> <li><a href="javascript:void(0)" class="f3" >大</a></li> <li> </ul> <p>文字が拡大されます。</p> </div> |
簡単なデモも用意しています。
jQuery Text Resizerのデモ
コメント