insomnia Web Workshop

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

Tweet

2001年に作成したコンテンツを移転したものです。

概要

操作するとページをリロードすることなくフォントサイズの変更を反映するタイプです。基本的にタイプAと同じですが、クッキーを併用しているので、変更したサイズ設定を保存できます。

ライセンス

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

説明

body要素のstyleオブジェクトのプロパティを書き換え、文書全体のフォントサイズを変更します。クッキーを併用しますので、リロードしたり、ページを移動しても設定を引き継ぐことができます。クッキーは「元に戻す」操作をしたときに削除されます。なお、クッキー操作の関数はhIdaho DesignのBill Dortch氏がパブリック・ドメインとして公開されている関数を一部変更して使用しています。

サンプル

動作確認ブラウザ

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

Netscape Communicator 4.x、Internet Explorer 4.0(MacOS)では動作しません。その他のブラウザは未確認です。

設置方法

jsファイルの保存

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

jsファイルの初期設定

値の単位を設定
font-sizeの単位を設定します。%、em、ex、pt、pxなどから好きな単位を選んで入力します。
一回の操作で変化させる値
「拡大」「縮小」操作をするごとに増減する数値を設定します。
初期状態の値
デフォルト状態での数値を設定します。「元に戻す」操作をしたときもこの値が適用されます。
クッキーの名前
保存するクッキーの名前を設定します。
クッキーの有効期限
クッキーを保存しておく期限を設定します。
クッキーのパス
ここで指定したディレクトリ以下でクッキーが有効になります。

変更を適用するページ

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

変更設定を行うページ

フォントサイズ変更設定を行うページに操作用の要素と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>

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

更新履歴

09/20/2012
CC0 1.0 Universal ライセンスの下、パブリックドメインとしました。
08/21/2004
クレジットのURIを変更
10/23/2001
WinIEとiCab以外のブラウザもbody要素のfontSizeプロパティを変更するように統一
09/21/2001
ソース見直し
07/17/2001
公開
トップページに戻る