テキストサイズを変更する、TextSizeController.js。
テキストサイズ(フォントサイズ)を変更するJavaScriptです。
アクセシビリティの向上に、多少なりとも役に立つかと思います。
Cookieを利用して、前回訪問時の設定も保存可能です。
また、全てのHTMLファイルに、このJSを読込ませれば、
ページ遷移をした時でも、設定を引き継げます。
全く別のJSを作っていたら、なぜか思いっきり脱線して、
このJSになりました(笑)。
折角なんでブラッシュアップして、公開してみます。
ライセンス等は、特に設けていませんので、
商用・私用・改変等、いずれもご自由にどうぞ。
但し、再配布は控えて下さい。
また、利用は全て自己責任でお願いします。
■ダウンロード(右クリックで保存して下さい)
TextSizeController.js
TextSizeController_1_1.js(2008/04/26 更新)
■サンプル
サンプルページ(2008/04/26 更新)
■利用にあたっての注意点
このJSの大まかな仕組みは、
bodyに適用するフォントサイズをJSで制御する事により、
テキスト要素のフォントサイズを変更させています。
ですので、現状のCSSの設計状態によっては、
うまく動作しない場合があります。
想定している環境は、サイズを変更させたいテキスト要素が、
bodyに設定しているフォントサイズを継承している状態です。
例えば、理想は以下のような状態。
body{ font-size:12px; } .small{ font-size:84%; } .medium{ font-size:100%; } .large{ font-size:117%; }
<body> <p class="small">10px相当</p> <p class="medium">12px相当</p> <p class="large">14px相当</p> </body>
この状態であれば、
- .small は、12px(bodyのfont-size)の84%
- .medium は、12px(bodyのfont-size)の100%
- .large は、12px(bodyのfont-size)の117%
となるので、bodyのfont-sizeを変更すれば、
継承しているテキストは、サイズが変更されます。
個人的には、このような継承を用いた、サイズ指定方法を採用・推奨しています。
継承は、DOCTYPE宣言や使用しているHTMLタグ、ブラウザ等によって、
挙動が変わる場合がありますので、ご注意下さい。
また、以下のように、個別にpx指定(固定)をしている場合は、
理想の動作をしない場合がありますので、ご注意下さい。
body{ font-size:12px; } .small{ font-size:10px; } .medium{ font-size:12px; } .large{ font-size:14px; }
■使い方
まずは、HTMLの設定方法から。
JSファイルを読込む設定をheadタグ内にします。
※パスは、利用する環境に合わせて設定して下さい。
<script type="text/javascript" src="TextSizeController.js"></script>
次に、コントローラー部分を設置します。
以下がサンプルコードです。
※サンプルは、テキストリンクですが、画像にリンクを張っても構いません。
<p><a href="#" class="tsMinus">テキストサイズを小さくする</a></p> <p><a href="#" class="tsReset">テキストサイズを元に戻す</a></p> <p><a href="#" class="tsPlus">テキストサイズを大きくする</a></p>
小さくさせるリンク(aタグ)には、class="tsMinus"を、
元に戻すリンク(aタグ)には、class="tsReset"を、
大きくさせるリンク(aタグ)には、class="tsPlus"を、
それぞれ記述して下さい。
これでHTMLの設定は終了です。
次に、JSファイルの以下の部分を、
使用する環境・希望する動作に合わせて設定します。
/* プロパティ ============================================================*/ //使用テキストサイズ単位 tsUnit:"px", //標準テキストサイズ normalSize:12, //変更単位サイズ unitSize:2, //クッキー名 cookieName:"tsc", //クッキー有効期限(日数) cookieExpDay:1, //クッキー無効時のアラートメッセージ cookieOffMsg:"Cookieを有効にして下さい。", //クッキー有効範囲 cookiePath:"/",
- 【使用テキストサイズ単位】
- bodyに適用しているフォントサイズの単位を設定して下さい。
- 【標準テキストサイズ】
- bodyに適用しているフォントサイズを設定して下さい。
単位は「使用テキストサイズ単位」で設定したものになります。 - 【変更単位サイズ】
- コントローラーを1回クリックする毎に、変更されるフォントサイズを設定して下さい。
単位は「使用テキストサイズ単位」で設定したものになります。 - 【クッキー名】
- 同様のクッキー名を使用している場合は、必ず変更して下さい。
- 【クッキー有効期限(日数)】
- クッキーの有効期限を日数で設定して下さい。
- 【クッキー無効時のアラートメッセージ】
- ユーザーがクッキーをオフにしている場合、このメッセージが表示されます。
必要に応じて適宜変更して下さい。 - 【クッキー有効範囲】
- 指定したパスにマッチする場合のみ、クッキーが送られます。
特定の範囲(ディレクトリ)のみで有効にしたい場合は、パスを指定して下さい。
設定は、以上です。
もし、設定方法が分からないとか、バグを発見された方は、
コメント頂けると助かります。
はじめまして。ちょうどこのようなライブラリがないか探していたので使用してみたのですが、どうも同じページで使用している別のライブラリとバッティング?しているようなのですが、原因はお解りになるでしょうか?
使用しているライブラリはスムーズスクロール用のライブラリでここから持ってきました。
http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/
もし時間があって、解るようでしたら教えて頂けると大変うれしいです。すみません、jsが全然ちんぷんかんぷんなので。。。
このブログは今回初めてきましたが、ブックマークさせていただきます。
はじめまして。
コメントありがとうございます。
実際のソースが拝見できませんので、、
かなりの想像(笑)で、回答させて頂きます。
ご指摘頂いたライブラリを確認した所、
href属性の値に#(シャープ)が入っていると(他にも条件は必要ですが。。)、
Smooth Scrollの機能を設定してしまう可能性があるので、
TextSizeControllerを設定するaタグのhref属性を、
<a href="javascript:void(0);" class="txMinus">
としてみて下さい。(※class名は機能毎に。)
恐らくこれで、機能するのでは?ないかと思います。
検討違いの事を言ってたら、スミマセン。。
差し支えない範囲で、ソースを頂ければ、
再度、回答させて頂きます。
こんにちは。
申し訳ないです。かなり返事がおくれてしまいました。そしてご回答頂いてありがとうございます。
trustさんの推測通り、href属性の#(シャープ)が原因だったようで、無事機能しました。
本当にありがとうございました。
最近めっぽう寒いですが、身体にお気をつけください。
ご報告、ありがとうございます。
推測で回答したものの、お役に立ててなによりです!
oncloudさんが出くわしたような、別ライブラリによる影響は、
今後、あってもおかしくないような内容でしたので、
1つの可能性として「こんな場合もあるんだ」と、
逆に、勉強になりました。
また、何かありましたら、お気軽にどうぞ!
はじめまして。
クッキーの保存先はディレクトリ毎の設定になるのでしょうか?
同じディレクトリであれば、ページ遷移しても問題ないのですが。。
はじめまして。
ご指摘、ありがとうございます。
クッキーに書込む際のオプションである、pathを記述していないのが、
原因と思われますので(スミマセン)、、
後程、修正・検証を行ないまして、改めてご報告させて頂きます。。
やはり、予想通り、pathを省略してしまっていたことが原因のようでした。。
改めて、スミマセン。。
修正版をアップしましたので、よろしければお試し下さい!
pathに関しては、以下の参考サイトを一読頂ければ、
こちらで説明するよりも、分かり易く纏められているので、
お分かりになるかと思います。
■Cookie(クッキー)の届く範囲 (あいまいモード)
http://www.imymode.com/exp/cookie.html
また、サブドメインでも引き継ぎたい場合は、
さらにdomainも設定する必要がありますので、ご注意下さい。
それでも、動作しない等ありましたら、
再度ご指摘・ご質問頂けると助かります!
早速のご回答・ご対応ありがとうございます!
問題なく動作しました(^o^)
確認ありがとうございました。
こちらも、同階層での検証しかしていなかったようで、、
全く気付いておらず、、大変助かりました!
また、何かあればご指摘頂けると嬉しいです。
はじめまして。
早速スクリプトを試しました。
使い方のサンプルページのhtmlでは、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
と、なっていますが、
文字コード部分を変更して
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
と、shift_jisに変更すると、機能しなくなってしまいました。
Winで機能しなくなりました。Macだと機能します。
一部ファイルが文字化けするので、どうしても文字コードをshift_jisにしたいのですが、機能するための対応策はありますか?
すみませんがご回答よろしくお願いします。
はじめまして。
ご質問ありがとうございます!
配布しているJSファイルが、utf-8になっていますので、JSファイルの文字コードを、HTMLと同じくshift_jisに変更してみて下さい。
検証は、出来ておりませんが、、、
恐らく機能するのでは?と思いますので、一度お試し頂ければと思います。
それでも、動かないということであれば、またご報告頂けると助かります!
早速ご返答いただき感謝しております。
jsファイルの文字コードをshift_jisに変更したら大丈夫でした。
非常に助かりました。どうもありがとうございました。
ご報告ありがとうございます!
文字コードの修正で、問題なく動作したようで、
安心しました。
また不明な点があれば、お気軽にご質問ください!