Web ページに文字サイズ拡大縮小ボタンを実装する方法に関するメモです。
文字サイズの大中小ボタンを配置する簡便な方法を別のページに記載しています。しかし,
という不満があります。 ワンクリックで文字の大きさを切り替えられるボタンの実装は,お年寄りに優しいという面もあるのですが,むしろスマートフォンで閲覧する場合に効果があるように思われます。
ここでは,以下のサイトを参考にして,もう少し使いやすい文字サイズ変更ボタンの実装を試みました。
上のサイトで公開されている JavaScript で記述された fscC.js というファイルを,ここでは js というディレクトリに保存することにします。
ボタンの代わりに a 要素を使います。 ボタン風の見た目にするために,HTML ヘッダ部に以下のような記述を付け加えます。
<style>
<!--
a.button {
margin:0.1em;
padding:0.3em;
border-top: solid 0.1em #eeeeee;
border-right: solid 0.1em #aaaaaa;
border-bottom: solid 0.1em #aaaaaa;
border-left: solid 0.1em #eeeeee;
background-color: #cccccc;
text-decoration:none;
}
a.button:hover {
background-color: #aaaaaa;
}
// -->
</style>
JavaScript を参照するために,HTML ヘッダ部に以下のような記述を付け加えます。
<script type="text/javascript" src="js/fscC.js"></script>
HTML ファイルの <BODY> と </BODY> で囲まれるボディー部の中で,大中小ボタンを表示したい場所に以下のコードを挿入します。
<p style="text-align:right" id="nav">
文字サイズ:
<span style="white-space:nowrap">
<!-- 拡大縮小挿入部はじめ -->
<a href="#" onclick="fsc('larger');return false;"
onkeypress="fsc('larger');return false;"
class="button">拡大</a>
<a href="#" onclick="fsc('smaller');return false;"
onkeypress="fsc('smaller');return false;"
class="button">縮小</a>
<a href="#" onclick="fsc('default');return false;"
onkeypress="fsc('default');return false;"
class="button">元に戻す</a>
<!-- 拡大縮小挿入部おわり -->
</span>
</p>
上のコードの中で,<p style="text-align:right"> 〜 </p> は右に寄せて表示する意味であり, <span style="white-space:nowrap"> 〜 </span> は改行を抑制する意味です。 ボタン風の外観は class="button" で指定されています。
Windows Internet Explorer 9.0.8 と Mac OS 10.7 上 Safari 5.1.7, Firefox 14.0.1, Google Chrome 20.0, iOS5.1.1 上 Safari, Google Chrome で動作の確認をしました。「Google Chrome はローカル環境では cookie を作らない」ことに気づくまでかなり悩みました。
2012年7月19日