2

文字サイズを[小][中][大]と切り替えられる「jQuery Text Resizer」

text-resizer

最近では、企業や各種サービス、公的機関のサイトなどで「文字サイズ」をユーザーの好みで切り替えることができる機能が付いているのを見かけます。
今回は、文字サイズを変更するためのボタンを配置し、クリックで切り替えを実装できるjQueryプラグインの「jQuery Text Resizer」をご紹介します。

おまけに、ユーザーがサイト内の別ページへ遷移したり一度ブラウザを閉じたりして再度閲覧した場合でも一度指定したサイズを維持することが可能になっているの点も利便性が高いです。そのために「jQuery Cookie」と併用し、現在の文字サイズをCookieに保持するようにしてみましょう。

デモサンプル

それでは、使い方を見ていきましょう。

jQuery Text ResizerとjQuery Cookieをダウンロード

cookie

JavaScriptを設置する

 オプション設定

target で文字サイズを変更する領域を指定
type:  [fontSize][cssClass][css]の3種類のどれかの値を指定します。
sizes には type: で指定した値に合わせた値を入れます。

 

▼type: “fontSize” の場合

【例:fontSize】

 

▼type: “cssClass” の場合

sizes: にはクラス名を指定します。

【例:cssClass】

 

▼type: “css” の場合

sizes: にはスタイルを直接指定します。

【例:css】

 

HTMLを記述

 

 CSSを記述

2 Comments

  1. 長年、styleswitcherを利用しておりましたが、とても参考に成りました。 複数のid要素に拡大縮小が出来ればもしくは、cssファイルそのものを差替えできれば、styleswitcherを凌ぐかもしれませんね。

    • 「cssp2017」さん
      コメントありがとうございます。そうですね、いろいろと用途は広げられるかもしれません。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > JavaScript > 文字サイズを[小][中][大]と切り替えられる「jQuery Text Resizer」