select your theme

このページは自分のサイトに色（CSS）を自由に選択できることを紹介します。
このサイトは好きな色の設定はできます。

MSNのトップページに右のイメージにテーマを選択ボタンがあります。それぞれを選択すると、ページの配置色が変わります。

やり方としては、先ずはユーザが選択したテーマ（CSS）をクッキーに入れて、再表示します。再表示際にクッキーにテーマ（CSS）があったら、ページに対応します。 MSNと違うと思いますが、このサイトにこのやり方でできました。分かり易くように整理して、シンプルなサンプルソースを下記に配布しています。

テストリンク：こちら
（効果を見る（実行）に、「テストリンク」をクリックしてください。リンクのファイルを保存したい場合、リンクを右クリックで「対象をファイルに保存」（Firefoxの場合、名前を付けでリンク先を保存）を選択してください。）

自分のサイトに配置したら、下記ファイルも必要です。（ファイルはこのサイトも使っていますので、下記ソースに記述以外部分は不要でもかまいませんです。）
main_whi.css（空ファイル）
main_blu.css
main_gre.css
main_ora.css
main_red.css

色を選択ボタン（表示例）
自分の色を設定：

ページに好きな色（テーマ）を自由に選択（HTML）

<html>
<head>
<title>www.uuware.com - select self's theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table {border:0px;border-collapse:collapse;border-spacing:0;}
th,td {padding:0px;}

.color_tbl{border:1px solid;width:100%;font-size:11pt;border-color:#92B0DD;}
.color_tbl th{color:#007deb;margin:0px;padding:1px 2px 1px 4px;border-bottom:1px solid;border-color:#92B0DD;background-color:#E2EAF8;font-size:14pt;font-weight:bold;text-align:left;}
.color_tbl td{margin:0px;padding:6px 6px 6px 10px;border-color:#92B0DD;}
</style>
<script type="text/javascript">
function setcookie(name, value, hours)
{
var expire = "";
if(typeof hours == "number") {
    expire = new Date((new Date()).getTime() + hours * 3600000);
    expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape (value) + expire;
}
function readcookie(name)
{
var c = document.cookie;
var p0 = c.indexOf(name + "=");
if (p0 != -1)
{
    var p1 = c.indexOf(";", p0);
    if (p1 == -1) p1 = c.length;
    var value = c.substring(p0 + name.length + 1, p1);
    return value;
}
return null;
}
function adjust_color(cor)
{
setcookie('user_css', cor, 24*365);
window.location.href=window.location.href;
return false;
}

var user_css = readcookie('user_css');
if(user_css != '') {
document.write('<' + 'link href="' + user_css + '" rel="stylesheet" type="text/css">');
}
</script>
</head>

<body class="main_body">
<div style="margin:20px 60px;width:400px;">
<table class="color_tbl code_tbl" style="background:#FFF;"><tr><th>
select self's theme(sample)
</th></tr>
<tr><td>
<div align="left">
<span style="font-size:9pt;color:#666666;">select self's theme:</span>
<input type=button value="" style="background-color:#edf4ed;width:16px;height:16px;" onclick="adjust_color('main_whi.css');return false;" />
<input type=button value="" style="background-color:#1a76b7;width:16px;height:16px;" onclick="adjust_color('main_blu.css');return false;" />
<input type=button value="" style="background-color:#66a72d;width:16px;height:16px;" onclick="adjust_color('main_gre.css');return false;" />
<input type=button value="" style="background-color:#d97125;width:16px;height:16px;" onclick="adjust_color('main_ora.css');return false;" />
<input type=button value="" style="background-color:#b33232;width:16px;height:16px;" onclick="adjust_color('main_red.css');return false;" />
</div>
<br>
while click on button,the page's color is changed.try it!
</td></tr></table>
<br>
</div>
</body>
</html>

ページに好きな色（テーマ）を自由に選択（CSS）

main_whi.css：
※デフォルトの配置なので、特にソースは入らない。

main_blu.css：
.main_body{background:#1A76B7;}

main_gre.css：
.color_tbl{border-color:#B0DB79;}
.color_tbl th{border-color:#B0DB79;background-color:#E4F3D1;}
.color_tbl td{border-color:#B0DB79;}

main_ora.css：
.color_tbl{border-color:#FCB079;}
.color_tbl th{border-color:#FCB079;background-color:#FDE5D2;}
.color_tbl td{border-color:#FCB079;}

main_red.css：
.color_tbl{border-color:#EB9797;}
.color_tbl th{border-color:#EB9797;background-color:#FDDFDF;}
.color_tbl td{border-color:#EB9797;}