Style Sheet Switcher
2006/05/13 @ 9:37 am
· Filed under CSS, Script
リンククリックで読み込むスタイルシートを切り替える Java スクリプトです。当サイトで以前使用していました。(2006/05/30 このページの PV が多いので、サンプルスクリプトを加筆)
【出典】 Alternative Style: Working With Alternate Style Sheets: A List Apart
【作者】 Paul Sowden
【ダウンロード】 A List Apart (styleswitcher.js / 1,840 Byte)
スタイルシートはいくつでも切り替えることが出来るので、ユーザーに好みのインターフェースを選択してもらえるような全く違うデザインのスタイルシートを何種類も用意するのも楽しい使い方ですが、その他 wired.com のように、単に全体の文字サイズを変更するという使い方もアクセシブルでよろしいと思います。
設定方法
- Java スクリプトファイル styleswitcher.js を Web サーバの任意のディレクトリに保存します。スクリプトを編集する必要はありません。
- スタイルシートを複数点用意し、Web サーバの任意のディレクトリに保存します。(ここでは 3 点用意したものとして説明します)
- タグ内にスクリプトを呼び出すための次のソースを挿入します。
- タグ内にスタイルシートを呼び出すための次のソースを挿入します。デフォルトにしたいスタイルの rel 属性は stylesheet、代替として扱うスタイルには alternate stylesheet を指定します。
title の値は任意です。ここではそれぞれ A・B・C としました。この値がスタイルシートを選り分けする ID になると考えて下さい。 - タグ内にスタイルシート切り替えボタンとなるリンクアンカーを記述します。
※ この CSS 切り替えアンカーは、ページ間のリンクではないことを示すために、title でスタイルシートの切り替えボタンであることを表現しておくと親切かもしれません。
さらに詳しい情報は、出典元 Alternative Style: Working With Alternate Style Sheets: A List Apart (英語) をご覧下さい。
TrackBack URI : http://www.peacock-union.com/archives/15/trackback/
こんにちは
スタイルシートの切り替えの方法を探していて、貴サイトを見つけました。
サイトのデザインもすばらしく、大変参考になりました。
私も今WordPressを勉強中です。
さて、このスタイルシートの切り替え方法はわかったのですが、実際に
視覚障害などの方がアクセスして、文字サイズを大きくしても、サイト内
で、ページを移動するたびに文字サイズの変更が必要になりますね。
Cookieなどを利用して、一度スタイルシートを選んで変更した情報を他の
ページに移動しても使えるような方法は出来ないでしょうか？
もし、そういう方法があれば、ぜひ教えていただければと思います。
Ziroさま
コメントありがとうございます。Cookieの生成によるページ移遷後の選択CSS踏襲ですが、このスクリプトはあらかじめそのようなファンクションを内包しており、上記のとおり設定するだけで、ご希望の動作をしてくれると思います。ご参考になれば。
ご返事、ありがとうございます。試してみます。