石輪っぷり!
フォントサイズの変更機能を設置
2006年7月 5日 4時23分 | コメント(0) | トラックバック(0)
※この投稿は180日以上前のものです。最新の情報とは異なる場合があります。
以前からやろうと思っていたことですが、このサイトにフォントサイズを変更するリンクを設置しました。右上の「文字サイズ: ~」の部分です。
オーソドックスに、フォントサイズを指定したCSSファイルを、それぞれのリンクテキストに埋め込んだJavaScriptで読み込ませるという手法です。最近Blogのデザイン(スタイルシート)を切り替える用途でよく使われていますね。
JavaScriptは、定番?のA List Apartで提供されているstyleswitcher.jsを利用させていただきました。
以下、Web標準への準拠やアクセシビリティに配慮した私なりの工夫もあるので、忘れない内に( ..)φメモメモ。
このサイトではデフォルトのベースフォントサイズを90%として、body要素に対して指定しています。これを上書きする形でフォントサイズを指定したCSSファイルを別途3種類用意しました。
#@importを使って古いIEをはじく設定もしていますので、そのCSSと合わせて9個のCSSファイルを新たに設置しています。
これを<head>~</head>内にlinkタグで、rel属性を「alternate stylesheet(:代替スタイルシート)」とし、title属性で名前を付けて読み込ませておきます。styleswitcher.jsの読み込みも忘れずに。
こんな感じ
<link rel="alternate stylesheet" href="/css/large.css" type="text/css" title="Large Text" media="all" />
<script type="text/javascript" src="/css/styleswitcher.js"></script>
次にCSSを切り替えるためのリンクテキストにaタグを使ってJavaScriptのイベントを設定します。ここでイベントから呼び出すCSSの指定を、linkタグで指定したtitle属性の内容と一致させます。
イベントの設定はonclick(マウスクリックに反応)だけでなく、onkeypressを併記して、キーボード操作にも反応するようにしました。(但し、Mozilla系ブラウザではTabキーにも反応してしまいますので厄介ですが。)
そして、JavaScriptが無効な環境では意味を成さないので、
<script type="text/javascript"><!-- document.write(' ~ '); --></script>
内にこのXHTMLを記述して、JavaScriptが有効な場合にのみ表示されるようにしました。
※ここでの注意事項ですが、document.write(' ~ ');内に記述するタグは、「'」の前と「/」の前に「\(バックスラッシュ)」を書かなければ、XHTMLの構文エラーになります。
こんな感じ(document.write(' ~ ');内)
<a href="#" onclick="setActiveStyleSheet(\'Large Text\'); return false;" onkeypress="setActiveStyleSheet(\'Large Text\'); return false;" title="文字サイズ[大きく]">大<\/a>
一方、JavaScriptが無効な環境では、変わりにnoscriptタグを使って、今までここに表示していた「文字サイズを大きくするには」のリンクが表示されるようにしています。
※ここでも注意: noscriptはブロックレベル要素であり、XHTML 1.0 Strict と XHTML 1.1 ではpタグの内側に書くことはできません。したがって、このサイトではサイトマップのリンクも合わせて、<script type="text/javascript"><!-- document.write(' ~ '); --></script>内と<noscript>~</noscript>内それぞれに記述しました。
(このサイトのblogのページはXHTML 1.0 Transitionalですが、それ以外はXHTML 1.0 Strictで書いています。)
さらに、JavaScriptが使えてもCSSが無効な環境ではクリックしても反応しないので、 その説明と「文字サイズを大きくするには」へのリンクのテキストを用意し、その部分のCSSにdisplay:none;を設定して通常は非表示になるようにしています。
詳細は、JavaScriptやCSSを無効にしてみたり、ソースをご覧いただきご確認ください。
※ 8月2日、insomnia Web Workshopさんの"フォントサイズ変更スクリプト(タイプB)"を利用した仕様に変更しました。
トラックバック(0件)
- :
- « 前の記事
- Internet Explorer 7の操作性
- 次の記事 »
- ググる[googling]

コメント(0件)
コメントする