「styleswitcher.js」で文字サイズ変更ボタンを設置する

新米Webデザイナーのナカモラです!
今回は「styleswitcher.js」というjavascriptを使った、文字サイズ変更ボタンの設置の仕方をご紹介いたします!

このスクリプトは複数のcssを読み込んで文字サイズを変更させるので、一括変換するものよりも微調整が可能です。
なので、今までも設置したいと思っていたけど、レイアウトが大きく崩れてしまうのがいや・・・ という方には特にお勧めなスクリプトです。
文字サイズだけでなくサイトのカラーを変えるボタンなどの設置も可能なので、これ1つで色々な応用ができます。覚えておくと何かの役に立つかもしれません。
では、設置方法をご紹介いたします。

A List Apartでstyleswitcher.jsをダウンロードしましょう。

ダウンロード方法

まずはスクリプトを用意します。
A List Apart
に飛んで、右側にあるサーチエリアで「styleswitcher.js」と入力します。
すると一番上に
「Alternative Style: Working With Alternate Style Sheets」
と出てくると思うのでクリック

下のほうに「Download styleswitcher.js」というリンクがあるので、そこからダウンロードしてください。
ダウンロードが完了したら、styleswitcher.jsフォルダを適用したいHTMLファイルがあるフォルダに入れます。

設置方法

↓のタグをHTML<head>~</head>内に書きます。
CSSを切り替えて読み込むために、rel属性の「alternate stylesheet」は必須です。

<script src=”styleswitcher.js”></script>
<!–??↓のタグで複数のスタイルシートを読み込みます?–>
<link rel=”stylesheet” href=”1.css” title=”small(←任意の名前)” />
<link rel=”alternate stylesheet” href=”2.css” title=”midlle(←任意の名前)” />
<link rel=”alternate stylesheet” href=”3.css” title=”large(←任意の名前)” />

<body>~</body>内の、ボタンを設置したい箇所に↓のタグを入れます。

<a onclick=”setActiveStyleSheet(‘small’) (←任意の名前); return false;”>小</a>
<a onClick=”setActiveStyleSheet(‘midlle’)(←任意の名前); return false;”>中 </a>
<a onClick=”setActiveStyleSheet(‘large’) (←任意の名前); return false;”>大</a>

これで完了です。
紹介したタグだと文字表示のボタンになりますが、画像を使うとよりボタンらしくなります。
カレント表示にしたい場合はそれぞれの読み込むcssにボタンの状態を記述してあげてください。

ただ、その際の注意点として
html内の<a>~</a>タグに画像タグを入れると何故か私の場合不具合が起こってしまったので、cssでbackground指定してあげると良いです。

※ちなみにtiny scrolling.jsというスクリプトも一緒に入れると不具合が起こるそうです。入れたい場合は解決策を書いているサイトで読んでから使うことをオススメします。

この記事は

Interest Speaker > How to / Tips > 「styleswitcher.js」で文字サイズ変更ボタンを設置する

この記事と類似または関連した記事

webフォント
webフォントを使ってサイトの表現力をアップ
1枚の画像に複数のリンクを貼る方法
1枚の画像に複数のリンクを貼る方法
CSS によるロールオーバー
CSS によるロールオーバー