| 公開日 | 2002.9.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 使用 | ||
| CSS | 使用 | ||
| 更新履歴 | --- | ||
| 記憶型 スタイルチェンジャー ver.1.0 |
||||
◆サンプル スタイル１ スタイル２ 元に戻す |
||||
| ＜機能と特徴＞ ・適用する外部スタイルシートを選択できます。 ・選択は記憶されるので複数のページで適用できます。 |
||||
 |
|
|
|
|
| 記憶型 スタイルチェンジャー ver.1.0 |
||||
◆サンプル スタイル１ スタイル２ 元に戻す |
||||
| ＜機能と特徴＞ ・適用する外部スタイルシートを選択できます。 ・選択は記憶されるので複数のページで適用できます。 |
||||
|
|
|
|
|
 |
|
| 公開日 | 2002.9.18 | ||
| 最終更新日 | --- | ||
| バージョン | ver.1.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 使用 | ||
| CSS | 使用 | ||
| 更新履歴 | --- | ||
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の スタイルシートを切替えるリンクを表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常にスタイルが切り替われば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>〜</head>の間に書き込んでください ２．//設定〜//ここまでの２行目を既定のスタイルシートのパスに変更してください。 s_c_css[0] = 'css/stylesheet.css';
３．//設定〜//ここまでの５行目を切り替わるスタイルシートのパスに変更してください。
s_c_css[1] = 'css/style1.css';
４．ソース２を<body>〜</body>の間の表示したい場所に書き込むか
各種イベントハンドラでstyle_chengers(1)関数を呼び出してください。５．ブラウザでテストしてみてください。 正常にスタイルシートが切り替われば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■クッキーの保存期間を変更する。(半角数字：正の整数) //設定〜//ここまでの１行目を変更してください。
s_c_cookie = 's_c_style';
■切り替わるスタイルシートを複数にする。//設定〜//ここまでの５行目を１行増やし 該当個所の数字と外部スタイルシートのパスを変更してください。 s_c_css[2] = 'css/style2.css';次にソース２を１行増やし該当個所の数字を変更してください。
<a href="JavaScript:style_chengersB(2);">スタイル２</a>
■既定のスタイルシートに戻すリンクを設置する。ソース２を１行増やし該当個所の数字を0にしてください。
<a href="JavaScript:style_chengersB(0);">元に戻す</a>
|
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.1.0
s_c_css = new Array();
//設定
s_c_cookie = 's_c_style'; //クッキーの名前
s_c_kikan = '30'; //クッキーの保存期間
s_c_css[0] = 'css/stylesheet.css'; //既定の外部スタイルシートのパス
s_c_css[1] = 'css/style1.css'; //1個目の切替える外部スタイルシート
//ここまで
function style_chengersB(i)
{with(document)
{s_c_date = new Date();
s_c_date.setTime(new Date().getTime()+s_c_kikan*24*60*60*1000);
cookie=s_c_cookie+"="+i+"; expires="+s_c_date.toGMTString()+";";
if(document.all)
{all("s_c_link").href = s_c_css[i];}
else if(document.getElementById)
{getElementById("s_c_link").href = s_c_css[i];}
else if(document.layers)
{if(cookie.indexOf(s_c_cookie+"="+i) == -1)
{alert('スタイルを変更するにはcookieを有効にしてください。');
return;}
location.reload();}}}
i=0;
with(document)
{s_c_id="";
s_c_cookies = cookie
if(s_c_cookies.indexOf(s_c_cookie) != -1)
{while(s_c_cookies.indexOf(' ') != -1)
{s_c_cookies = s_c_cookies.replace(" ","");}
s_c_cookies = s_c_cookies.split(";");
for(a in s_c_cookies)
{s_c_style = s_c_cookies[a].split("=");
if(s_c_style[0] == s_c_cookie)
{i=s_c_style[1];}}}
if(document.all || document.getElementById)
{s_c_id='id="s_c_link"';}
open();
write('<link rel="stylesheet" href="'+s_c_css[i]+'" type="text/css" '+s_c_id+'>');
close();}
// -->
</script>
|
■ソース２(以下のソースを<body>〜</body>の間に書き込んでください) | |
<!--スタイルを元に戻すリンク--> <a href="JavaScript:style_chengersB(0);">元に戻す</a>
<!--1個目リンク--> <a href="JavaScript:style_chengersB(1);">スタイル１</a>
 |
|