フォントサイズ可変スクリプト ver.1.10 ヘルプ

2006/8/6版
Written By Rikiya Takazawa (Studio Rikiy: http://rikiy.jp)

javascriptとcssを利用したフォントサイズ可変機能をサイトに持たせることができるスクリプトです。
本ヘルプ自体がサンプルページも兼ねておりますので、サンプルソースとしてご活用下さい。

フォントを小さくする
フォントを標準サイズに戻す
フォントを大きくする

特長

動作環境条件

設置方法

◆cgfont.jsの設定

基本的に編集する必要はありませんが、ソース冒頭の設定パラメータを必要に応じて変更してください。

//設定 --------------------------------
 
//サイズリスト
SizeList = new Array (75,87.5,100,130,150);
 
//デフォルトフォントサイズ
DefaultKey = 2;
 
//Bodyタグに挿入するID名
BodyID = "default";
 
//設定終、編集禁止 --------------------------------

  1. サイズリスト(SizeList)

    フォントサイズ(単位は%)の可変段階・度合を調節できます。
    配列の先頭の値(インデックス番号0)が最小値、配列の最後の値が最大値として昇順にサイズを設定してください。
    デフォルトでは75%(最小値)→87.5%→100%→130%→150%(最大値)の5段階がクリックごとに切り替わるようになっています。
    配列数イコール可変段階となりますので、配列を増やしたり減らしたりすればその分可変段階の増減も可能ですが、一般的には5段階程度が妥当でしょう。

  2. デフォルトフォントサイズ(DefaultKey)

    デフォルトボタンを押した際のフォントサイズ、いわゆる初期値を、配列SizeListのインデックス数で指定します。
    インデックス数は0から始まりますので、デフォルトでは2、つまり100(%)が設定されていることになります。

  3. Bodyタグに挿入するID名(BodyID)

    HTML側の設定で、 bodyタグにid名を指定する必要があるのですが、その値を任意で設定することができます。
    デフォルトでは"default"となっています。
    つまりHTML側には

    <body id="default">
    と記述すればよいということです。

◆HTMLファイルの設定

  1. cgfont.jsを読み込む

    ソース内のどこでもよいので(まぁhead内が妥当でしょう)scriptタグでcgfont.jsを読み込んで下さい。

    <script language="javascript" type="text/javascript" src="./cgfont.js"></script>

  2. bodyタグにid名を設定

    cgfont.jsにて設定した変数BodyIDの値をbodyタグにIDとして指定してください。
    デフォルトのBodyID値は"default"となっていますので

    <body id="default">
    となります。

  3. aタグによるスクリプトの埋め込み

    aタグによりフォント可変を実行するスクリプトを記述してください。
    スクリプト名はcgfontで、下記のように拡大(large)・標準(default)・縮小(small)とそれぞれ値で動作を指定できます。

    <a href="javascript:cgfont('small');">フォントを小さくする</a>
    <a href="javascript:cgfont('default');">フォントを標準サイズに戻す</a>
    <a href="javascript:cgfont('large');">フォントを大きくする</a>
    テキストリンクの場合、自身のサイズも変化してしまい若干使いづらいかもしれませんから、画像でボタンを作成するのもよいかもしれません。
    またGetURL要素を利用してFlashへの機能埋め込みも可能です。

注意事項

↑ページの先頭へ戻る