表示できなかったjQueryスクリプトを書いておきます。
これにすると、初表示時にCSSが読み込まれませんでした。 なので、忍者ブログのテンプレートにjQueryをブチ込んでみた（5）に書いた方法にしたんですが…
<head> <link rel="stylesheet" type="text/css" href="http://<!--$g_user_id-->/css/" id="jstyle" /> <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="javascript:jstyle('http://file.<!--$g_user_id-->/css2cl.css');"><img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" /></a></li>
<li><a href="javascript:jstyle('http://file.<!--$g_user_id-->/css3c.css');"><img src="http://file.<!--$g_user_id-->/header_navi_3c.png" alt="3 Column" /></a></li>
<li><a href="javascript:jstyle('http://file.<!--$g_user_id-->/css2cr.css');"><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('780px');"><img src="http://file.<!--$g_user_id-->/header_navi_n.png" alt="> <" /></a></li>
</ul>
</body>
中身の説明です。
【<head>〜</head>内に記述】
《レイアウト変更用》
<link rel="stylesheet" type="text/css" href="http://<!--$g_user_id-->/css/" id="jstyle" />
CSS変更用にidを設定しています。
《レイアウト・フォントサイズ・横幅選択用》
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:'/'});
}
// Styleseat
$(function(){
$("#jstyle").attr({href:$.cookie('style')});
});
function jstyle(cssurl){
$('#jstyle').attr({href:cssurl});
$.cookie('style',cssurl,{expires:30,path:'/'});
}
【<body>〜</body>内に記述】
ここでは、<img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" />などの画像を使用していますが、テキストでも構いません。
《レイアウト変更用》
3種類のスタイルを変更するため3つのリンクがあります。 <javascript:jstyle>には<head>〜</head>に記述したCSSのidと同じものを記述します。
http://file.<!--$g_user_id-->/css3c.cssなどは切り替え用のCSSファイルです。
<li><a href="javascript:jstyle('http://file.<!--$g_user_id-->/css2cl.css');"><img src="http://file.<!--$g_user_id-->/header_navi_2cl.png" alt="2 Column LeftNavi" /></a></li>
<li><a href="javascript:jstyle('http://file.<!--$g_user_id-->/css3c.css');"><img src="http://file.<!--$g_user_id-->/header_navi_3c.png" alt="3 Column" /></a></li>
<li><a href="javascript:jstyle('http://file.<!--$g_user_id-->/css2cr.css');"><img src="http://file.<!--$g_user_id-->/header_navi_2cr.png" alt="2 Column RightNavi" /></a></li>
シンプルにすると↓こんな感じ。
<a href="javascript:jstyle('http://file.<!--$g_user_id-->/css2cl.css');">スタイルA</a><br />
<a href="javascript:jstyle('http://file.<!--$g_user_id-->/css3c.css');">スタイルB</a><br />
<a href="javascript:jstyle('http://file.<!--$g_user_id-->/css2cr.css');">スタイル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>
[1回]
PR
