フォントサイズ変更スクリプト(タイプC)

概要

操作するとページをリロードしてフォントサイズの変更を反映するタイプです。Netscape Communicator 4.xでも動作します。クッキーを併用しているので、変更したサイズ設定を保存できます。

ライセンス

To the extent possible under law, ugumi has waived all copyright and related or neighboring rights to this work.
このスクリプトはCC0 1.0 Universal ライセンスの下でリリースされています（パブリックドメイン）。

説明

ページ読み込み時にクッキーの値をもとにfont-sizeを指定し、style要素を生成します。変更操作時には変更後の値をクッキーに書き込んだ後、ページを再度読み込みます。クッキーを併用しますので、リロードしたり、ページを移動しても設定を引き継ぐことができます。クッキーは「元に戻す」操作をしたときに削除されます。なお、クッキー操作の関数はhIdaho DesignのBill Dortch氏がパブリック・ドメインとして公開されている関数を一部変更して使用しています。

サンプル

• サンプルページ
• サンプルページを新しいウィンドウで開く

動作確認ブラウザ

以下の環境で動作を確認しました

• Mozilla 0.9.1(Windows Me)
• Mozilla 0.9.1(MacOS)
• Internet Explorer 5.5(Windows Me)
• Internet Explorer 5.0(Windows 98SE)
• Internet Explorer 5(MacOS)
• Internet Explorer 4.5(MacOS)
• Internet Explorer 4(MacOS)
• iCab Pre2.5.1(MacOS)
• Netscape Communicator 4.75 (Windows Me)
• Netscape Communicator 4.7 (MacOS)

上記以外のブラウザは未確認です。

設置方法

jsファイルの保存

jsファイルを適当なファイル名で保存して、格納したいディレクトリに置きます。ここではスクリプトを使用したいHTMLファイルと同じディレクトリに「fscC.js」というファイル名で保存したと仮定します。
なお、ファイルはUTF-8Nでエンコードしています。必要に応じて変更してください。

jsファイルの初期設定

値の単位を設定

font-sizeの単位を設定します。%、em、ex、pt、pxなどから好きな単位を選んで入力します。

一回の操作で変化させる値

「拡大」「縮小」操作をするごとに増減する数値を設定します。

初期状態の値

デフォルト状態での数値を設定します。「元に戻す」操作をしたときもこの値が適用されます。

クッキーの名前

保存するクッキーの名前を設定します。

クッキーの有効期限

クッキーを保存しておく期限を設定します。

クッキーのパス

ここで指定したディレクトリ以下でクッキーが有効になります。

変更を適用するページ

フォントサイズの変更を適用したいページ全てに必要な設定です。

• HTMLファイルのhead要素内に<script type="text/javascript" src="fscC.js"></script>を記述します。（HTMLファイルとjsファイルを違うディレクトリに置く場合はパスに注意してください）

変更設定を行うページ

フォントサイズ変更設定を行うページに操作用の要素とonclick属性とonkeypress属性を記述します。属性値は拡大の場合"fsc('larger');return false;"、縮小は"fsc('smaller');return false;"、元に戻すのは"fsc('default');return false;"となります。

input要素を使う場合の記述例

XHTMLの場合はinput要素を閉じる必要があります

<form id="fscform" action="#">
<p>
<input type="button" value="拡大" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" >
<input type="button" value="縮小" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" >
<input type="button" value="元に戻す" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" >
</p>
</form>

a要素を使う場合の記述例

<a href="#" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" >拡大</a>
<a href="#" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" >縮小</a>
<a href="#" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" >元に戻す</a>

ブラウザごとの動作の違い

• IE、iCabは見出し要素（Hx要素）のフォントサイズが変更されません。別途スタイルシートでフォントサイズを指定することで変更できるようになります。
• Mozilla以外のブラウザではtable要素やform要素など一部の要素は親要素のfont-sizeを継承しないので、これらの要素の文字サイズは変化しません。
• Mac版NC4.xはブラウザの初期設定でOsakaフォントを指定している場合、body要素にパーセント値のfont-sizeを指定すると20%ほど大きく表示されてしまいます。