このサイトではテンプレートサンプル以外のページはフォントサイズを指定せず、「文字サイズ変更ボタン」を設置しています。メニューにある「文字サイズ：小 中 大」がそうです。Javascriptを使用しているので、当然ながらJavascriptの設定が無効になっている場合は表示されません。また、フォントサイズを変更したという設定を保存するためにcookieが有効でなければいけません。
アクセシビリティを考慮する潮流となり、ページの右上などにこのような文字サイズ変更ボタンをつけている企業サイトが増えました。
しかし、個人サイトにおいては稀で、pxやptでサイズを固定しているところもまだまだ多いというのが現状です。ここで配布しているテンプレートはフォントサイズを相対指定していますが、それがどのブラウザからも見やすいとは限りません。
相対指定であれば閲覧側のブラウザでサイズを調節可能ですが、Windows＆IEのデフォルトの設定ではpxまたはptで指定された文字の大きさを変えることはできません。また、モニタの解像度やブラウザの種類、OSによってCSSの解釈はかなり異なるので、自分にとって見やすい大きさの文字が他人にとってもそうであると限りません。設定や環境が皆異なるので、サイト製作者が閲覧者全てに対応したCSSを書くのは現実的に不可能となっています。
画像メインのサイトであれば多少文章が読みづらくても、htmlにimgタグをきちんと貼りつけてアップロードさえできれば、サイト製作者の「展示物（＝画像）をみんなに見てほしい」という目的をある程度達成することが可能です。しかし、テキストサイトにおいては文字サイズ・文字色・背景色・行間などを考慮しなければ、最悪展示物（＝文章）が読めないこともありえます。
そこで当サイトでは閲覧者が自分好みの文字サイズを選んで閲覧できる環境作りを推奨します。その一つの案として、この文字サイズ変更ボタンを挙げています。
IE7では「文字サイズ変更」他に「ページ全体のズーム」する機能が追加されました。Operaは「最小フォントサイズ」を設定できますが、文字を拡大すると画像も拡大されてしまいます。ページごと拡大したいと思って閲覧者がこれらの機能を使ったのならいいでしょう。しかし、文字だけを拡大したいのに画像も大きくしてしまった場合は、閲覧者も画像を美しく見せたいサイト側としても不本意です。こんな時文字サイズ変更ボタンをつけておけば、ズーム機能がついているブラウザを使用している閲覧者は「文字だけを拡大する」という動作を気軽に行うことができます。
このボタンをつけたからといって飛躍的にアクセシビリティが向上するわけではありません。しかし、閲覧時にブラウザの設定を変えるストレスを軽減できるので、便利だと思った方は是非設置してみてください。
prototype.jsを用いたフォントサイズ変更スクリプトに全て書いてあります。
以下は私なりの解説なので、上の記事を読んで分からなかった方は参考にしてください。
このスクリプトはbodyのフォントサイズを変更しています。なので、私が配布しているCSSを使っている場合はbodyのfont-size:84%;などを削除してください。これでブラウザの設定通りのフォントサイズで表示されるようになります。見出しタグなどは文字色や大きさを変えて本文より目立たせる必要があるので、それらのfont-sizeの指定を削除する必要はありません。
bodyのfont-sizeの指定を残したままでも文字サイズ変更ボタンは作動しますが、デザインが崩れる場合があります。
この三つのスクリプトはあなたのサイトのエンコードに合わせて保存してください。htmlのエンコードがUTF-8であればスクリプトのエンコードもUTF-8といったふうにです。不一致は文字化けの原因となります。
任意のフォルダに三つのスクリプトをアップロードしてください。サーバにはアスキーモードで転送します。パーミッションを変更する必要はありません。
このサイトを例に挙げると、http://hmx-12.net/tbc/cgi-bin/javascript/にアップロードしています。
文字サイズ変更ボタンを表示させたい場所に以下のソースを書き加えます。【スクリプトまでのパス】と【ID】を書き換えてください。【ID】はどんな半角英字でもいいのですが、ここではFontChanger.start('size');として話を進めます。
<script type="text/javascript" src="【スクリプトまでのパス】prototype.js"></script>
<script type="text/javascript" src="【スクリプトまでのパス】cookiemanager.js"></script>
<script type="text/javascript" src="【スクリプトまでのパス】fontchanger.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
FontChanger.start('【ID】');
//-->
</script>因にこのサイトではこのようになっています。構造が分かりやすいように前後のタグも載せてあります。太字のところに注目してください。
<!--================-->
<!-- メニュー -->
<!--================-->
<div id="menu">
<h1>menu</h1>
<ul>
<li><a href="../../" title="トップページ">index</a></li>
<li><a href="../../note.html" title="利用規約など">はじめに</a></li>
<li><a href="../../template.html" title="テンプレート">テンプレート</a></li>
<li id="on"><a href="../../neta.html" title="テキストサイト向けカスタム講座">講座</a></li>
<li id="script"><a href="../../../cgi-bin/mail/form.html" title="メールフォーム">連絡口</a></li>
</ul>
<script type="text/javascript" src="../../../cgi-bin/javascript/prototype.js"></script>
<script type="text/javascript" src="../../../cgi-bin/javascript/cookiemanager.js"></script>
<script type="text/javascript" src="../../../cgi-bin/javascript/fontchanger.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
FontChanger.start('size');
//-->
</script>
</div>
<hr>
<!--================-->
<!-- 記事部分 -->
<!--================-->スクリプトまでのパスは相対指定でも絶対指定でも構いません。
私はメニューに設置していますがヘッダーでもいいと思います。擬似フレームを使用している場合は常に変更ボタンが表示されているので便利かもしれません。
なお、<script type="text/javascript" src="【スクリプトまでのパス】fontchanger.js" charset="UTF-8"></script>のUTF-8はあなたのサイトのエンコードに合わせてください。不一致は文字化けの原因になります。
文字サイズ変更ボタンのソースを書いたhtmlをアップロードし、そのページにアクセスすれば、文字サイズ変更ボタンが表示されているはずです。
javascriptが有効な環境であればローカルディスクでも作動するので、サーバにアップロードする前に確認した方がいいかもしれません。
表示されない場合は以下の項目をチェックしてください。
このサイトのソースを見たり、prototype.jsを用いたフォントサイズ変更スクリプトを読み返してください。
また、文字サイズ変更ボタン用ソースを入れていないページには設定が適応されません。なので、全ページに文字サイズ変更ボタンのソースを書き加える必要があります。大量にページがある場合はTextSSなどの文字列置換ソフトの使用をお勧めします。PHPが使えるサーバであるならPHPで構築するという方法もあります。
以下は文字サイズ変更ボタンをより使いこなしたい人向けです。
cdp＿0004の#MENU ulの下に文字サイズ変更ボタンのソースを書き込みました。変更ボタンの文字が左に寄りすぎて不恰好です。
なので、CSSで見た目を整えます。ここのサーバからfontchanger.jsをDLしていてかつ、cdp＿0004を使用している場合はstyle.cssに以下のソースを追加すればそのまま使えます。
/* フォントサイズ変更ボタン */
#menu p#size
{
padding:0.25em;
margin:0 auto;
font-weight:700;
text-align:center;
}
/* 文字サイズ変更ボタンの大中小の字 */
#size-small
{
font-size:84%;
}
#size-medium
{
font-size:100%;
}
#size-large
{
font-size:120%;
}CSSに書き加えることによりこのようにバランスよく表示されます。
sizeは「4. htmlに文字サイズ変更ボタンのソースを書き加える」のFontChanger.start('【ID】');の【ID】の部分が当てはまります。例えば【ID】をhenkouとした場合はcssのsizeの部分をhenkouにします。他の文字を入力した場合も適時CSSを書き換えてください。
<!--
FontChanger.start('size');
//-->
</script>
を呼び出した時、
<p id="size">文字サイズ：
<a href="javascript: void(0);" id="size-small" title="文字を小さくする（84％）">[小]</a>
<a href="javascript: void(0);" id="size-medium" title="文字を標準に戻す（100％）">[中]</a>
<a href="javascript: void(0);" id="size-large" title="文字を大きくする（120％）">[大]</a>
</p>このように表示されます。つまり「小」「中」「大」のスタイルの改変はスタイルシートで行えます。<p>で括りたくない、表示を変えたい場合は、fontchanger.jsの29～33行目を修正してください。
このように着せ替えテンプレートでも使用できますが、個別に指定したタグやcssの指定は、そのまま着せ替えができず、追加した分を別途書き換える必要があるのでご注意ください。新たに使用するデザインによっては#MENU p#size以下色々と修正しなければいけないかもしれません。
fontchanger.jsの36行目から38行目で拡大・縮小率の設定ができます。
onClickSmall: function(e) { this.change('84%'); },
onClickMedium: function(e) { this.change('100%'); },
onClickLarge: function(e) { this.change('120%'); }このサイトでは小（84％）、中（100％）、大（120％）となっています。
文字の大きさだけでなく、行間、文字の種類、文字色、背景色も「読みやすさ」の重要な要素です。
配布しているCSSはfont-familyを指定していますが、自分の好きなフォントで読みたいから指定しないでほしいという閲覧者も少なからずいます。これは自分が表現したいデザインとの折り合いですが、本文のfont-familyを指定しない、改行が少ない文章には行間を多めに取るなど、読みやすいと思う環境をそれぞれ考えてみてください。
オリジナルテンプレート（1）で使用しています。小説用プレートですが、スクリプトだけの使用もできますので、お使いください。時間が出来次第、追記の解説を書きます。
個人的に、新たに文字サイズ変更ボタンを設置するのであれば prototype.js より jQuery をお勧めします。ソースコードの簡潔かつ設置が簡単で、スクリプトの容量も後者の方が小さいからです。