実際のソースコードは以下のようになっています。
<head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->" /> <meta name="description" content="<!--$g_explanation-->" /> <title><!--$g_title--> <!--$g_page_title--></title> <link rel="shortcut icon" href="http://file.<!--$g_user_id-->/favicon.ico" /> <link rel="stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css2cl.css" title="css2cl" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css3c.css" title="css3c" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css2cr.css" title="css2cr" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://<!--$g_user_id-->/RSS/" /> <link rel="alternate" type="application/atom+xml" title="ATOM" href="http://<!--$g_user_id-->/ATOM/" /> <script type="text/javascript" src="http://file.<!--$g_user_id-->/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://file.<!--$g_user_id-->/jquery.cookie.js"></script> <script type="text/javascript" src="http://file.<!--$g_user_id-->/css.js"></script> </head>
<body>
<ul>
<li><a href="#" rel="css2cl" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" /></a></li>
<li><a href="#" rel="css3c" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_3c.png" alt="3 Column" /></a></li>
<li><a href="#" rel="css2cr" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_2cr.png" alt="2 Column RightNavi" /></a></li>
<li><a href="javascript:font('120%');"><img src="http://file.<!--$g_user_id-->/header_navi_fl.png" alt="Large Font Size" /></a></li>
<li><a href="javascript:font('100%');"><img src="http://file.<!--$g_user_id-->/header_navi_fm.png" alt="Medium Font Size" /></a></li>
<li><a href="javascript:font('80%');"><img src="http://file.<!--$g_user_id-->/header_navi_fs.png" alt="Small Font Size" /></a></li>
<li><a href="javascript:body('100%');"><img src="http://file.<!--$g_user_id-->/header_navi_w.png" alt="< - >" /></a></li>
<li><a href="javascript:body('750px');"><img src="http://file.<!--$g_user_id-->/header_navi_n.png" alt="> <" /></a></li>
</ul>
</body>
説明です。
【<head>〜</head>内に記述】
《レイアウト変更用》
レイアウト変更用のCSSを3つ（5つのスタイルを選択させる時は5つ用意します）。
<link rel="stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css2cl.css" title="css2cl" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css3c.css" title="css3c" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://file.<!--$g_user_id-->/css2cr.css" title="css2cr" media="screen" />
relに、初期読み込み時の表示には"stylesheet"を、選択用に"alternate stylesheet"を記述します。
レイアウト変更用スクリプト（styleswitch.js）。
<script type="text/javascript" src="http://file.<!--$g_user_id-->/styleswitch.js"></script>
《フォントサイズ・横幅選択用》
jQueryを使用するためのライブラリー（jquery-1.4.2.min.js）と、アクション後の表示状態を保持するためのプラグイン（jquery.cookie.js）が必要です。
<script type="text/javascript" src="http://file.<!--$g_user_id-->/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://file.<!--$g_user_id-->/jquery.cookie.js"></script>
そしてフォントサイズ・横幅選択用のjQuery使用スクリプト。
<script type="text/javascript" src="http://file.<!--$g_user_id-->/css.js"></script>
この中身は↓こんな感じ。
// Font Size
$(function(){
$("body").css("font-size",$.cookie('fsize'));
});
function font(size){
$("body").css("font-size",size);
$.cookie("fsize",size,{expires:30,path:'/'});
}
// Width
$(function(){
$("#blockBorder").css("width",$.cookie('bodyWith'));
});
function body(size){
$("#blockBorder").css("width",size);
$.cookie("bodyWith",size,{expires:30,path:'/'});
}
【<body>〜</body>内に記述】
ここでは、<img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" />などの画像を使用していますが、テキストでも構いません。
《レイアウト変更用》
3種類のスタイルを変更するため3つのリンクがあります。
relには<head>〜</head>に記述した各CSSのtitleと同じものを、classには"styleswitch"と記述します。
<li><a href="#" rel="css2cl" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" /></a></li> <li><a href="#" rel="css3c" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_3c.png" alt="3 Column" /></a></li> <li><a href="#" rel="css2cr" class="styleswitch"><img src="http://file.<!--$g_user_id-->/header_navi_2cr.png" alt="2 Column RightNavi" /></a></li>
シンプルにすると↓こんな感じ。
<a href="#" rel="css2cl" class="styleswitch">スタイルA</a> <a href="#" rel="css3c" class="styleswitch">スタイルB</a> <a href="#" rel="css2cr" class="styleswitch">スタイルC</a>
《フォントサイズ選択用》
'120%'や'80%'と記述してある部分にサイズを指定します。
pxやemなどでも構いません。
<li><a href="javascript:font('120%');"><img src="http://file.<!--$g_user_id-->/header_navi_fl.png" alt="Large Font Size" /></a></li>
<li><a href="javascript:font('100%');"><img src="http://file.<!--$g_user_id-->/header_navi_fm.png" alt="Medium Font Size" /></a></li>
<li><a href="javascript:font('80%');"><img src="http://file.<!--$g_user_id-->/header_navi_fs.png" alt="Small Font Size" /></a></li>
シンプルにすると↓こんな感じ。
<a href="javascript:font('120%');">大サイズ</a>
<a href="javascript:font('100%');">中サイズ</a>
<a href="javascript:font('80%');">小サイズ</a>
《横幅選択用》
'100%'や'750px'と記述してある部分に横幅のサイズを記述します。
<li><a href="javascript:body('100%');"><img src="http://file.<!--$g_user_id-->/header_navi_w.png" alt="< - >" /></a></li>
<li><a href="javascript:body('750px');"><img src="http://file.<!--$g_user_id-->/header_navi_n.png" alt="> <" /></a></li>
シンプルにすると↓こんな感じ。
<a href="javascript:body('100%');">横幅100%</a>
<a href="javascript:body('750px');">横幅750px</a>
[0回]
PR
