小粋空間  -  a cheap joke and a play on words site

Slider によるフォントサイズ変更でアクセシビリティを向上させる

以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。

下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。
Slider は矢印キー・PageUp/PageDown・マウススクロール（これは IE のみ）でも操作可能です。IE より Firefox の方がよりスムーズに動きます。

フォントサイズ変更サンプル

ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。
Slider のダウンロード・インストールについては「Slider の利用方法」の２項をご覧ください。

１．Slider 用ライブラリ・CSSのインクルード

テンプレートの /head の直前に下記のタグを追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>
<style type="text/css">
.horizontal {
    width: 155px;
    height: 20px;
}
</style>

.horizontal は Slider をサイドバーの幅に合わせるため、slider/css/bluecurve/bluecurve.css の設定を上書きしています。

２．Slider の設定

テンプレートのサイドバー部分に下記のタグを追加します。この部分に Slider が表示されます。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

３．フォントサイズ用スクリプトの設定

下記のスクリプトをテンプレートの /body の直前に追加します。

<script type="text/javascript">
//<![CDATA[
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
    document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';
};
s.setValue(25);
window.onresize = function () {
    s.recalculate();
};
//]]>
</script>

フォントサイズを決定しているのは、

document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';

の部分で、s.getValue() がスライドバーの移動によって実際に値を取得している部分です。
また、スライドバーのデフォルト位置については、

s.setValue(25);

で設定しています。この両者を変更することで、フォントサイズの増減率やスライドバーのデフォルト位置を変更することができます。色々試してみてください。

４．CSS 修正

スタイルシートで設定している font-size プロパティの値を px 指定から % 指定に変更します。フォントサイズ変更方式については下記の記事を参考にさせて頂きました。ありがとうございました。

Ogawa::Memoranda：prototype.jsを用いたフォントサイズ変更スクリプト

以下、サンプルで使用している公開テンプレートにおける変更箇所です。青は追加または変更を示します。.blog セレクタの font-size プロパティは削除してください。
カスタマイズに無関係のプロパティは省略していますので予めご了承ください。

body {
    font-size: 100%;
}
.blog {
    font-size: small;
}
.date { 
    font-size: 55%;
}
.entry {
    font-size: 62%;
}
.entry-header {
    font-size: 93%;
}
.entry-footer {
    font-size: 72%;
}
.sidetitle {
    font-size: 52%;
}
.side {
    font-size: 52%;
}