[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
(1)
まずは
Alternative Style: Working With Alternate Style Sheetsから
JavaScriptスクリプト「styleswitcher.js」をダウンロードする。
※念のためここにもアップしときます。
この中で
「有効日数」とかの設定も出来るはず。
(2)
これをhead内で呼び出し。
スクリプトで利用するスタイルシートも呼び出し。
<head>内に
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
★フォルダに入れてる場合は「contents_css/」とか「js/」を忘れずに。
★変更するフォントのスタイルシートをrel=”alternate stylesheet”で
呼び出すことがポイント。
title=は処理を判断する時の名前というかんじ。
(3)
HTML内には下記のタグを記入
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a>
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中</a>
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
★style.css内で#contentsと指定しているので
<div id="contents">内がサイズ変更される。
つまりサイズ変更したいコンテンツをここに入れる。
divの名前がcontentsではない場合は、style.css内の#contentsも変更する。
(4)
cssファイルを3つ作成する。もちろんサイズ変更可能。
●style.cssには
#contents{font-size:100%;}
●style1.cssには
#contents{font-size:80%;}
●style2.cssには
#contents{font-size:120%;}
これで完成！！
