またまたカスタマイズで今更な感じはやっぱりあるんですが、サイドメニューの折りたたみを出来るようにカスタマイズしました。
なんか色々なカスタマイズ調べて導入するのもめんどくさかったので、たまたま持っていたテンプレートからJavaScript移設し、タグ挿入しておしまい。意外に簡単でしたね。FC2で前やったときのJavaScriptとはちょっと違うんですけど、ほとんど一緒です。
ロリポブログはテンプレ内のhtmlが長くなると最後の方が切れちゃうと言う不具合って言いますか、規制数があるのでJavaScripthは外部ファイルにして行いました。
- 外部ファイルを作り、サーバーに保存する。（これ）
[code lang=”js”]if(document.getElementById){
document.writeln(‘<style type="text/css" media="all">’);
document.writeln(‘<!–‘);
document.writeln(‘.sidehide{display:none;}’);
document.writeln(‘–>’);
document.writeln(‘</style>’);
}
function showHide(id){
var disp = document.getElementById(id).style.display;
if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}
function showHide2(id){
var disp = document.getElementById(id).style.display;
if(disp == "none"){
document.getElementById(id).style.display = "block";
}else{
document.getElementById(id).style.display = "none";
}
return false;
}
var scrj = 1;
function softScrollBack() {
if(navigator.appName == "Microsoft Internet Explorer" && document.compatMode == "CSS1Compat") {
var scdist = document.body.parentNode.scrollTop;
} else {
var scdist = document.body.scrollTop;
}
if(scrj<50 && scdist) {
scdist = (scdist>2) ? Math.ceil(scdist*.2) : 1;
scrj++;
scrollBy(0,-scdist);
setTimeout("softScrollBack()",20);
} else {
scrollTo(0,0);
scrj = 1;
}
}[/code] - テンプレートの<head></head>内にリンクを記載する
- 折りたたみを適用する部分にHTMLを追加して書き込む
こんな感じにしてみる。
上記のように挿入する。どの部分のクリックしたら動くようにするのかを考えて<a href="javascript:void(0);" onClick="showHide(‘000’);" title="CLICK OPEN/CLOSE" />を挿入する(‘000’)の部分はid番号を振る、他に開閉する物とidがかぶらないようにする。このidをクリックしたときにどのぶぶんを開閉させるかを記している部分がid="000" style="display: block;"です。idの部分は同じidになるようにしてください。私の場合は番号を振っていますが、半角英数文字で言葉を入れることも可能です、自分の解りやすい様にし、ほかの開閉部分とidがかぶらないようにしてください。最初から開いておく場合は
id="000" style="display: block;"
最初から閉じておく場合は
id="000" style="display: none;"
と設定してください。と、言うことでこのブログのサイドにある緑のメニューバー部分をクリックするとメニューが開閉するようになりました。
コメント