すてきな気分〜ナイスフィーリングブログ〜

テキストサイズ変更 jQuery Text Resizer plugin

サイトのテキストサイズを変更できるようにするjQueryプラグイン「Text Resizer」が便利だったので使ってみた。
結構色々な所で紹介されていて、idやclassで変更させるエリアを指定できる優れもの。
汎用性も高いのでとってもいいんだけど、本体は別ファイル、サイズ指定をヘッダーに書くという所が今ひとつと言えば今ひとつ・・・ (-ω-; ムム…

設置はjQuery Cookieと一緒に

<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: "fontSize",
        sizes: [ "90%","100%","120%" ]
    });
});
</script>

と書く訳だけど、フォントサイズの指定部分を.jsに入れて、ヘッダーをスッキリしたい!と思う場合、

$(document).ready( function() {
  $( "#textsize a" ).textresizer({
   target: "#contents",
   type: "fontSize",
   sizes: [ "90%","100%","120%" ]
  });
});

と書き直してあげればOK。

ちなみに、「target」はカンマ区切りで複数指定可能だし、「type」は「fontSize」「cssClass」「css」と使い分けが出来る。

HTMLに関しては

<p id="textsize">
    <a href="javascript:void(0)">小</a>
    <a href="javascript:void(0)">中</a>
    <a href="javascript:void(0)">大</a>
</p>

とサイズの記述順に反映される。
うん、いいですね!

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です