サイト内全ページのスタイルを変更し、なおかつクッキーに保存します。次回アクセス時や、ページの移動時には記憶されたスタイルが適用されます。まず下記ファイルをクリックしダウンロードして下さい。
change_css.js
change_css.js
ダウンロードしたらファイルを右クリックし、「編集」を選びます。1行目に書かれている
var hp = "http://www.○○○.ne.jp/~△△△/";
の太線斜体文字のところを、あなたのホームページのアドレスに合わせて変更し、上書き保存します。
var hp = "http://www.○○○.ne.jp/~△△△/";
の太線斜体文字のところを、あなたのホームページのアドレスに合わせて変更し、上書き保存します。
次に、HPのフォルダ内に1〜5というフォルダを新たに作成します。そしてその中にはそれぞれ文字色や背景色や、表などのスタイル、背景画像などの指定をした外部スタイルシートファイルや、画像などを置きます。例として、当サイトで使用している外部スタイルシートのうちの一つをそのまま掲載しておきます。見ればわかると思いますが、このように外部スタイルシートの差し替えによってあらゆるタグの色やスタイルが変わるように、ページを作成する以前からかなりち密な計算をしてサイト構築をしています。タグに対してもIDやCLASSを大変多用しています。下記のスタイル指定は青基調の「SKY」用の外部スタイルシートです。
<!--
BODY{
margin:0;
overflow:auto;
font-size:12;
color:#490093;
line-height:150%;
font-family:"MS UI Gothic";
background-color:#cee7ff;
scrollbar-base-color:#4a398c;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.cur);
}
TD{
font-size:12;
line-height:150%;
font-family:"MS UI Gothic";
}
IMG{
vertical-align:middle;
}
INPUT,SELECT,TEXTAREA{
color:#490093;
background-color:#c5d5f5;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1a.ani);
}
A{
color:white;
text-decoration:none;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.ani);
}
A:VISITED{
color:#f8f8f5;
}
A:ACTIVE{
color:hotpink;
}
A:HOVER{
text-decoration:underline;
}
.a_kanren{
color:yellow;
}
.time{
behavior:url(#default#time2);
}
.dot1{
border-top:5 dotted #0000cc;
}
.groove2{
padding:2;
border:2 groove;
color:#0000ce;
background-color:#6394ef;
}
#back{
background-image:url(back.gif);
}
#top{
background-image:url(top_arrow.gif);
}
.content_m{
z-index:4;
top:0;left:0;
border:1 outset;
position:relative;
background-color:#0080ff;
}
.content_t{
width:620;
height:40;
border:2 outset;
background:url(bg_content_t.gif);
}
#content_t{
font-size:24;
color:#0000cc;
font-family:verdana;
font-weight:bold;
}
#elv{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blueviolet,endColorStr=turquoise);
}
.source_tbl{
margin-left:70;
width:550;
}
.source_header{
width:550;
height34;
color:white;
font-size:11;
text-align:right;
background:url(source_header.gif) no-repeat;
}
#setsu,#setsu2,#setsu3,#setsu4{
font-size:12;
padding:10;
margin-top:5;
border:2 outset;
background-color:#94b5f7;
}
.source_body{
font-size:11;
padding:15;
padding-top:2;
color:#0000ce;
border:2 groove;
border-top:none;
background-color:#6394ef;
}
.source{
padding:8;
font-size:12;
border:2 inset;
color:#333333;
font-family:Arial;
line-height:150%;
background-color:#9cceff;
}
.hi_cpl{
font-family:"ＭＳ ゴシック";
}
.oDiv{
width:100;
top:0;left:0;
color:white;
font-size:11;
text-align:center;
position:absolute;
font-family:verdana;
}
.td_M{
height:15;
border:1 outset;
background-color:#0000ce;
}
.td_M1{
cursor:hand;
font-weight:bold;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.ani);
}
.td_M2{
font-size:10;
line-height:100%;
font-family:"MS UI Gothic";
}
.gTd{
height:15;
border:2 groove;
background-color:blue;
filter:alpha(opacity:65);
}
.m_sam_td{
border:2 groove;
background-color:#ffe794;
}
.m_sam_td{
border:2 groove;
background-color:#ffffd6;
}
-->
そしてこのような外部スタイルシートを作成したら、全てファイル名は「site.css」という名前にして作成した1〜5というフォルダ内にそれぞれ保存して下さい。つまり、サイト構成はこのようになります。
public_html（ここが仮にTOPフォルダとします）
│
├─ 1
│ ├
site.css
│ ├
bg-image.gif
│ └ source_header.gif
├─ 2
│ ├ site.css
│ ├ bg-image.gif
│ └ source_header.gif
├─ 3
│ ├ site.css
│ ├ bg-image.gif
│ └ source_header.gif
├─ 4
│ ├ site.css
│ ├ bg-image.gif
│ └ source_header.gif
├─ 5
│ ├ site.css
│ ├ bg-image.gif
│ └ source_header.gif
│
├─ change_css.js（ダウンロードしたJSファイル）
├─
index.html（現在のTOPページ）
├─ menu.html（現在のメニューページ）
├─ sub.html（現在のサブメニューページ）
├─ link.html（現在のリンクページ）
└─ profile.html（現在のプロフィールページ）
<!--
BODY{
margin:0;
overflow:auto;
font-size:12;
color:#490093;
line-height:150%;
font-family:"MS UI Gothic";
background-color:#cee7ff;
scrollbar-base-color:#4a398c;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.cur);
}
TD{
font-size:12;
line-height:150%;
font-family:"MS UI Gothic";
}
IMG{
vertical-align:middle;
}
INPUT,SELECT,TEXTAREA{
color:#490093;
background-color:#c5d5f5;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1a.ani);
}
A{
color:white;
text-decoration:none;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.ani);
}
A:VISITED{
color:#f8f8f5;
}
A:ACTIVE{
color:hotpink;
}
A:HOVER{
text-decoration:underline;
}
.a_kanren{
color:yellow;
}
.time{
behavior:url(#default#time2);
}
.dot1{
border-top:5 dotted #0000cc;
}
.groove2{
padding:2;
border:2 groove;
color:#0000ce;
background-color:#6394ef;
}
#back{
background-image:url(back.gif);
}
#top{
background-image:url(top_arrow.gif);
}
.content_m{
z-index:4;
top:0;left:0;
border:1 outset;
position:relative;
background-color:#0080ff;
}
.content_t{
width:620;
height:40;
border:2 outset;
background:url(bg_content_t.gif);
}
#content_t{
font-size:24;
color:#0000cc;
font-family:verdana;
font-weight:bold;
}
#elv{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blueviolet,endColorStr=turquoise);
}
.source_tbl{
margin-left:70;
width:550;
}
.source_header{
width:550;
height34;
color:white;
font-size:11;
text-align:right;
background:url(source_header.gif) no-repeat;
}
#setsu,#setsu2,#setsu3,#setsu4{
font-size:12;
padding:10;
margin-top:5;
border:2 outset;
background-color:#94b5f7;
}
.source_body{
font-size:11;
padding:15;
padding-top:2;
color:#0000ce;
border:2 groove;
border-top:none;
background-color:#6394ef;
}
.source{
padding:8;
font-size:12;
border:2 inset;
color:#333333;
font-family:Arial;
line-height:150%;
background-color:#9cceff;
}
.hi_cpl{
font-family:"ＭＳ ゴシック";
}
.oDiv{
width:100;
top:0;left:0;
color:white;
font-size:11;
text-align:center;
position:absolute;
font-family:verdana;
}
.td_M{
height:15;
border:1 outset;
background-color:#0000ce;
}
.td_M1{
cursor:hand;
font-weight:bold;
cursor:url(http://ad.il24.net/~ura/ico_cur_ani/arrow3/1.ani);
}
.td_M2{
font-size:10;
line-height:100%;
font-family:"MS UI Gothic";
}
.gTd{
height:15;
border:2 groove;
background-color:blue;
filter:alpha(opacity:65);
}
.m_sam_td{
border:2 groove;
background-color:#ffe794;
}
.m_sam_td{
border:2 groove;
background-color:#ffffd6;
}
-->
そしてこのような外部スタイルシートを作成したら、全てファイル名は「site.css」という名前にして作成した1〜5というフォルダ内にそれぞれ保存して下さい。つまり、サイト構成はこのようになります。
public_html（ここが仮にTOPフォルダとします）│
├─
1│ ├
site.css│ ├
bg-image.gif│ └
source_header.gif├─
2│ ├
site.css│ ├
bg-image.gif│ └
source_header.gif├─
3│ ├
site.css│ ├
bg-image.gif│ └
source_header.gif├─
4│ ├
site.css│ ├
bg-image.gif│ └
source_header.gif├─
5│ ├
site.css│ ├
bg-image.gif│ └
source_header.gif│
├─
change_css.js（ダウンロードしたJSファイル）├─
index.html（現在のTOPページ）├─
menu.html（現在のメニューページ）├─
sub.html（現在のサブメニューページ）├─
link.html（現在のリンクページ）└─
profile.html（現在のプロフィールページ）
そして、サイト内の全てのページのソースを下記のようにして下さい。
<HTML>
<HEAD>
<TITLE>サイトスタイルを変更、記憶</TITLE>
<LINK ID="userCss" rel="stylesheet" type="text/css" href="">
<SCRIPT language="JavaScript" src="change_css.js"></SCRIPT>
</HEAD>
<BODY onload="checkMyCss()">
<!--サイト内でスタイル変更を行なうセレクトボックスを置くページの表示したい位置に下記を書き込みます-->
<form name="c1">
<SELECT name="s1" onchange="cssCookie()">
<OPTION value="0" selected>・SELECT</OPTION>
<OPTION value="1">・SKY</OPTION>
<OPTION value="2">・SUN</OPTION>
<OPTION value="3">・EARTH</OPTION>
<OPTION value="4">・SWEET</OPTION>
<OPTION value="5">・TREE</OPTION>
</SELECT>
</form>
<!--ここまで-->
</BODY>
</HTML>
<HEAD>
<TITLE>サイトスタイルを変更、記憶</TITLE>
<LINK ID="userCss" rel="stylesheet" type="text/css" href="">
<SCRIPT language="JavaScript" src="change_css.js"></SCRIPT>
</HEAD>
<BODY onload="checkMyCss()">
<!--サイト内でスタイル変更を行なうセレクトボックスを置くページの表示したい位置に下記を書き込みます-->
<form name="c1">
<SELECT name="s1" onchange="cssCookie()">
<OPTION value="0" selected>・SELECT</OPTION>
<OPTION value="1">・SKY</OPTION>
<OPTION value="2">・SUN</OPTION>
<OPTION value="3">・EARTH</OPTION>
<OPTION value="4">・SWEET</OPTION>
<OPTION value="5">・TREE</OPTION>
</SELECT>
</form>
<!--ここまで-->
</BODY>
</HTML>