スタイルシートマニア
CSSで文字サイズ変更 | ホームページカスタマイズ Tips
実際ブラウザで文字サイズを変更できる事をしっているのは、我々ホームページ制作にかかわる人間か、そこそこパソコンが使い慣れた人間で、ほとんどの人は文字サイズが変えられる事を知らないまま使っているのではないかと思います。
そこで、styleswitcherというjavascriptを使ってホームページ上から文字サイズを変更しましょう。これはstyleswitcherでそれぞれの文字サイズのスタイルシートを読み返させて文字サイズを変更します。
まずはstyleswitcherをダウンロード
次に、ダウンロードしたファイルをjavascriptを置いているフォルダ（jsなど）へアップロードします。そして、ヘッダの中にstyleswitcherを読み込ませる記述を入れます。
例えば
<head>
<script type=”text/javascript” src=”/js/styleswitcher.js”></script>
</head>
など
そして、それぞれのフォントサイズのスタイルシートも読み込ませます。
例えば
<head>
<link rel=”stylesheet” type=”text/css” media=”screen,tv” href=”css/import.css” />
<link rel=”alternate stylesheet” type=”text/css” href=”css/small.css” title=”Small”>
<link rel=”alternate stylesheet” type=”text/css” href=”css/large.css” title=”Large”>
<script type=”text/javascript” src=”/js/styleswitcher.js”></script>
</head>
次にhtmlの中にフォントサイズを変更するボタンを設置します。
例えば
<div id=”change-fontsize”>
<p id=”change-fontsize_tilte”>文字サイズを変更</p>
<ul>
<li id=”minus”><a onClick=”setActiveStyleSheet(‘Small’); return false;”>マイナス</a></li>
<li id=”return”><a onClick=”setActiveStyleSheet(‘Default’); return false;”>元に戻す</a></li>
<li id=”plus”><a onClick=”setActiveStyleSheet(‘Large’); return false;”>プラス</a></li>
</ul>
</div>
<!–change-fontsize End–>
など
これで設置完了です。
| « 前の記事 | 次の記事 » |
