文字サイズ変更ボタンを設置してみました。小・中（標準）・大の3段階の変更が可能です。（cookieには対応していないので、ページの更新や移動により中（標準）サイズに戻ります。）いまどきのブラウザには文字サイズ変更機能があるので、あえて文字サイズ変更ボタンを設置する必要は無いと思いますが、「このサイトはアクセシビリティに配慮しています。」というアピールになる…かも。
| お知らせ |
|---|
文字サイズ変更ボタン設置方法
2009年12月08日
ページ内の任意の場所に設置する方法
1.下記コードを</head>の直前に記述。
<script type="text/javascript">
function small(){document.getElementById('wrapper').style.fontSize="75%";}
function middle(){document.getElementById('wrapper').style.fontSize="100%";}
function large(){document.getElementById('wrapper').style.fontSize="125%";}
</script>
2.下記コードを<body>～</body>の任意の場所に記述。
<form action="#" class="fontsize">
<p>文字サイズ：
<input type="submit" value="小" onclick="small();return false;" onkeypress="small();" />
<input type="submit" value="中" onclick="middle();return false;" onkeypress="middle();" />
<input type="submit" value="大" onclick="large();return false;" onkeypress="large();" />
</p>
</form>
サイドバーにプラグインとして設置する方法
1.下記コードを</head>の直前に記述。
<script type="text/javascript">
function small(){document.getElementById('wrapper').style.fontSize="75%";}
function middle(){document.getElementById('wrapper').style.fontSize="100%";}
function large(){document.getElementById('wrapper').style.fontSize="125%";}
</script>
2.下記コードをカスタムプラグインに記述。
<form action="#" class="fontsize">
<p>文字サイズ：
<input type="submit" value="小" onclick="small();return false;" onkeypress="small();" />
<input type="submit" value="中" onclick="middle();return false;" onkeypress="middle();" />
<input type="submit" value="大" onclick="large();return false;" onkeypress="large();" />
</p>
</form>
3.サイドバーにカスタムプラグインを表示。
注意
- 上記1項のコード中の'wrapper'は、ページ内の文字サイズを変更する箇所のIDにします。HamaZoブログでは、文字サイズ変更の対象がページ全体の場合、'wrapper'を'container'にします。
- HamaZoブログでテンプレートをカスタマイズする場合は、上記1～2項をトップページ・個別記事・アーカイブの全てに記述します。
以上です。
画像一覧 
