文字サイズ変更ボタンを付けよう

More

HTMLソースの変更

せっかくなので、文字サイズ変更ボタンもCSSでデザイン変更できるようにしたいと思い、小川さんのコードの一部を以下のように修正しました。
JavaScriptで書き出される文章にこんなことをする必要は全くないのですが（笑）

// fontchanger.jsの25行目から39行目 document.writeln([ '<p id="' + id + '">', '<span class="fontcaption">文字の大きさ: </span>', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする">小</a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す">中</a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする">大</a>', '</p>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); },

拡縮率の変更

結論: でかフォントは人を健康にします。

と仰っているだけに、小川さんのブログはフォントサイズが大きめの「100%」です。しかし、一般のブログは基本文字サイズがもっと小さくなっていることが多いです。
例えば、基本文字サイズが「90%」のこのブログにFontchangerをそのまま使うと、「小」ボタンを押したときの文字サイズがかなりの豆字になってしまいます。

そこで、fontchanger.jsの拡縮率の設定をWebbingStudio用に変更しました。

// fontchanger.jsの40行目から42行目 onClickSmall: function(e) { this.change('85%' ); }, onClickMedium: function(e) { this.change('100%'); }, onClickLarge: function(e) { this.change('120%'); }

cookieの保存期間

フォントサイズの保管には、cookiemanager.jsというライブラリが使われています。
このライブラリは「指定した名前と値を365日間保存するcookieを発行する」というものだそうです。

ですが「サイトの文字サイズを変更した」という記録だけを閲覧者のPCに365日＝丸一年も保管させるというのは、ちょっと長すぎるような気がします。
数ヶ月ごとに定期的に訪問する可能性があるECサイトで個人情報を記録する、などであれば適切かもしれませんが、この場合、同様のcookieを発行している別ドメインのサイトが膨大にあり、一度しか使用されない可能性も高いからです。
そこで、cookieの保存期限を90日＝三ヶ月に縮めてみました。

小川さんの方でバージョンアップ時に上記機能を追加してくださいました。
小川さんの記事後半の「2007-01-23追記:」以下をご参照ください。

---

InternetExplorer7は、基本の拡縮機能が「文字サイズ変更」から「ページ全体のズーム」に変わります。
ページが崩れないという点では便利なのですが、画像も拡大されてしまうため、写真等を綺麗に見せたいサイトにはネックとなります。
サイト内に簡単に文字サイズを変えられるボタンを付けておくことで、IE7や、同様にズーム機能がメインのOperaの閲覧者にも選択肢を与えられると思います。

おまけですが、WebbingStudioに使った文字サイズ変更ボタンの画像を置いておきますので、ご自由にお持ち帰りください。
※CSSレイアウト用なので、6個のボタンが一枚絵になっています。img要素で貼り付けたい方は、任意で切り分けてください。