最近では、企業や各種サービス、公的機関のサイトなどで「文字サイズ」をユーザーの好みで切り替えることができる機能が付いているのを見かけます。
今回は、文字サイズを変更するためのボタンを配置し、クリックで切り替えを実装できるjQueryプラグインの「jQuery Text Resizer」をご紹介します。
おまけに、ユーザーがサイト内の別ページへ遷移したり一度ブラウザを閉じたりして再度閲覧した場合でも一度指定したサイズを維持することが可能になっているの点も利便性が高いです。そのために「jQuery Cookie」と併用し、現在の文字サイズをCookieに保持するようにしてみましょう。
それでは、使い方を見ていきましょう。
jQuery Text ResizerとjQuery Cookieをダウンロード
JavaScriptを設置する
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.textresizer.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#textsize a").textresizer({ target: "#contents", type: "cssClass", sizes: [ "f1","f2","f3" ] }); }); </script> <!-- 現在選択されているボタンのみactive表示にする --> <script type="text/javascript"> jQuery(function($){ //ボタンをクリックしたら実行 $('li a').click(function(){ //activeでないボタンだった場合のみ動作 if(!$(this).hasClass('active')){ //現在activeのついているclassを削除 $('.active').removeClass('active'); //クリックしたボタンをactive $(this).addClass('active'); //クリックした要素のID名を変数にセット var setFontSize = this.id; //クッキーに変数を保存 $.cookie('fontSize', setFontSize); //一度classを除去して、変数をclassとして追加 elm.removeClass().addClass(setFontSize); } }); }); </script> |
オプション設定
target: で文字サイズを変更する領域を指定
type: [fontSize][cssClass][css]の3種類のどれかの値を指定します。
sizes: には type: で指定した値に合わせた値を入れます。
▼type: “fontSize” の場合
【例:fontSize】
|
1 2 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("textsize a").textresizer({ target: "contents", type: "fontSize", sizes: ["10px","12px","14px"] }); }); </script> |
▼type: “cssClass” の場合
sizes: にはクラス名を指定します。
【例:cssClass】
|
1 2 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("textsize a").textresizer({ target: "contents", type: "fontSize", sizes: ["f1","f2","f3"] }); }); </script> |
▼type: “css” の場合
sizes: にはスタイルを直接指定します。
【例:css】
|
1 2 |
<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を記述
|
1 2 3 4 5 |
<div id="contents"> <ul id="textsize" class="clearfix"> <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> </ul> <div>▼上のボタンで下の文字サイズが切り替わります。</div> <div class="resizeArea"> <p>ここに記述されている文字のサイズが切り替わります。</p> <p>ABCDEFG</p> <p>abcdefg</p> <p>123456789</p> </div> </div> |
CSSを記述
|
1 2 3 4 5 6 7 8 9 |
#contents { margin:10px; } ul#textsize { list-style:none; margin:30px; } ul#textsize li { display:inline-block; } ul#textsize li a { border-radius:3px; background-color:#d9d9d9; background: linear-gradient(#fff 30%, #d8d8d8 95%, #fff); padding:10px 20px; border:1px solid #c5c5c5; display:block; text-decoration:none; vertical-align:middle; color:#333; } ul#textsize li a.active { color:#fff; border-radius:3px; background-color:#7ca830; background: linear-gradient(#7ca830, #34720b); padding:10px 20px; border:1px solid #c5c5c5; display:block; text-decoration:none; } ul#textsize li a:hover { color:#fff; border-radius:3px; background-color:#7ca830; background: linear-gradient(#7ca830, #34720b); padding:10px 20px; border:1px solid #c5c5c5; display:block; text-decoration:none; } .f1 {font-size:80%;} .f2 {font-size:100%;} .f3 {font-size:120%;} li a.f1,li a.f2,li a.f3 {font-size: 100%;} .resizeArea { background-color: #e4e4e4; width:auto; height:auto; padding: 5px; border: 1px dotted #666; margin-top:5px; line-height: 1.5em; } |