文字を大きくするボタン、実際に作ってみた。サンプル参照。用途に合わせてZIPファイルもどうぞ。汎用性はほとんど考えていないので、利用するときには注意されたし。
Cookieの読み書きの部分はいまADPで使っているやつ、つまり、Movable Typeのデフォルトテンプレートについてきたやつ（setCookie, getCookie, deleteCookie, fixDate）をそのまま使っている。んで、HTMLファイルのボタンをおくところで今回の肝となるスクリプトのファイルを読み出して、
if (document.getElementById && document.createElement && navigator.cookieEnabled) {
if(getCookie('largefont')) {
document.write('<a href="#" onclick="dCookie();location.reload();">文字を元に戻す</a>');
var l=document.createElement('link');
l.rel="stylesheet";
l.type="text/css";
l.href="20041007e.css";
document.getElementsByTagName('head')[0].appendChild(l);
wCookie();
} else {
document.write('<a href="#" onclick="wCookie();location.reload();">文字を大きくする</a>');
}
}
function wCookie () {
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('largefont', 'yes', now, '', HOST, '');
}
function dCookie () {
deleteCookie('largefont', '', HOST);
}な感じでdocument.writeを使っている。largefontつーCookieがあれば「文字を元に戻す」というリンクを生成し、文字を大きくするCSSファイルをlink要素で拾ってくる。Cookieがなければ「文字を大きくする」というリンクを生成する。それだけ。
「文字を大きくする」リンクをそれらしいボタンに変えるのは、お好みで。でっかい虫眼鏡マークにするとか。主目的はこういう配慮をしてますよ、とアピールすることだが、ADPで使われている各種テクニックを使えば、画像で作った文字のフォントサイズも大きく出来るので、IE6のブラウザの機能としての文字サイズ変更よりも便利なところもある。
で、いくつか問題点を。
Cookie使用可能の判断では、navigator.cookieEnabledで判断している。が、Cookieは使えるけれどあんたのサイトには許可しないよ、というセキュリティ設定のときでも「文字を大きくする」のリンクが出てしまう。当然、そのときにはこのボタンで文字を大きくすることは出来ない。まじめにやるには、Cookieを1度書いてみてちゃんと読み出せたら、というようにする必要がある。
DOMを解釈できるかどうか、と、Cookieが使用可能かどうかは判別しているのに、CSSが利用可能かどうかは判別していない。document.styleSheetで判断させるのが普通なのかもしれないが、Operaが知らないとか実装上の問題もあるので、とりあえずやってない。ここもお好みで。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/359
あれ、SafariやMacIE5だとうまくいかないみたいです。なんでだろ。
ありがとうございます。画像で作った文字も大きくすることを考えると、style.fontSizeとlink要素生成の併用がいいのかもしれませんね。
や、画像を大きくする（画像を変更する）のもスクリプトのみで可能です。……というわけでサンプルにその辺りの動作も追加してみました。
なるほど。わかりやすい説明ありがとうございます。実際のデザインで使う場合は、画像のURLのみならず、positionや他の影響を受けるセレクタのプロパティも微調整することになりますから、スクリプトで完結させる場合、データをわかりやすく書くか、CSSファイルから変換させるかしないと（自分が）混乱すると思っています。というのがあって、できるだけ手抜きで済まそう、という考えがあったのですが、もうちょっと考えてみます。