スタイルチェンジャー
ver.1.0
 
 ◆サンプル

スタイル1  スタイル2  元に戻す 
 
    <機能と特徴>
 
 ・適用する外部スタイルシートを選択できます。
 



 

公開日 2002.9.18
最終更新日 ---
バージョン ver.1.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 使用(NN4のみ)
CSS 使用
更新履歴 ---    

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.カスタマイズフォームを使って設定をしてください。

2.ソース1を<head>〜</head>の間に書き込んでください。

3.ソース2を<body>〜</body>の間の
  スタイルシートを切替えるリンクを表示したい位置に書き込んでください。

4.ブラウザでテストしてみてください。
  正常にスタイルシートが切り替われば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.ソース1を<head>〜</head>の間に書き込んでください

2.//設定〜//ここまでの2行目を既定のスタイルシートのパスに変更してください。
s_css[0] = 'css/stylesheet.css';
3.//設定〜//ここまでの5行目を切り替わるスタイルシートのパスに変更してください。
s_css[1] = 'css/style1.css';
4.ソース2を<body>〜</body>の間の表示したい場所に書き込むか   各種イベントハンドラでstyle_chengers(1)関数を呼び出してください。

5.ブラウザでテストしてみてください。
  正常にスタイルシートが切り替われば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
ダウンロードする形式を選択してください。

 【スクリプトを1つのページに組み込む】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。
 
2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。
 
5.複数のページが必要な場合は、カスタマイズフォームで設定をし
  再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
クッキーの名前:
(通常は変更の必要はありません)
既定の外部スタイルシートのパス:
既定のスタイルに戻すリンク:  
既定スタイルに戻すリンクの文字:
 
 【スタイルを変えるリンクの設定】 
設置するリンクの数:
☆★☆1個目のリンク☆★☆
 外部スタイルシートのパス:  
 リンクの文字:
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 
切り替わるスタイルシートを複数にする。

 //設定〜//ここまでの5行目を1行増やし
 該当個所の数字と外部スタイルシートのパスを変更してください。
s_css[2] = 'css/style2.css';
 次にソース2を1行増やし該当個所の数字を変更してください。
<a href="JavaScript:style_chengers(2);">スタイル2</a>
 
 
  

ソース1(以下のソースを<head>〜</head>の間に書き込んでください)  
 
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.1.0

s_css = new Array();
//設定 s_cookie = 's_style'; //クッキーの名前 s_css[0] = 'css/stylesheet.css'; //既定の外部スタイルシートのパス
s_css[1] = 'css/style1.css'; //1個目の切替える外部スタイルシート //ここまで
function style_chengers(i) {with(document) {if(document.all) {all("s_link").href = s_css[i];} else if(document.getElementById) {getElementById("s_link").href = s_css[i];} else if(document.layers) {s_date = new Date(); s_date.setTime(new Date().getTime()+15*1000); cookie=s_cookie+"="+i+"; expires="+s_date.toGMTString()+";"; if(document.cookie.indexOf(s_cookie+"="+i) == -1) {alert('スタイルを変更するにはcookieを有効にしてください。'); return;} location.reload();}}}
i=0; with(document) {if(document.all || document.getElementById) {s_id='id="s_link"';} else if(document.layers) {s_id=""; s_cookies = cookie if(s_cookies.indexOf(s_cookie) != -1) {while(s_cookies.indexOf(' ') != -1) {s_cookies = s_cookies.replace(" ","");} s_cookies = s_cookies.split(";"); for(a in s_cookies) {s_style = s_cookies[a].split("="); if(s_style[0] == s_cookie) {i=s_style[1];}}}} open(); write('<link rel="stylesheet" href="'+s_css[i]+'" type="text/css" '+s_id+'>'); close();}
// --> </script>

ソース2(以下のソースを<body>〜</body>の間に書き込んでください)  
 
<!--スタイルを元に戻すリンク-->
<a href="JavaScript:style_chengers(0);">元に戻す</a>

<!--1個目リンク--> <a href="JavaScript:style_chengers(1);">スタイル1</a>


スクリプト無効時にはスタイルシートの切替えは出来ません。
 どうしてもスタイルシートを適用したい場合は
 <head>〜</head>の間に<noscript>〜</noscript>を書き込み
 その間に<link>でスタイルシートを読み込むといいでしょう。

 【HTMLの仕様では<head>〜</head>の間で
  <noscript>〜</noscript>は使えない事になっていますが
  動作確認のブラウザでは問題なく動作します。】


ウェブ木箱サンプル集
copyright(C) 2002-2004 あう