サイドバーの開閉

ライブドアブログの、サイドバーの開閉方法です（o・∀・o）
このカスタマイズは、infinitie loopサマの記事を参考にさせていただきました
ありがとうございます！

とりあえず下準備として、以下のJavaScript構文を、パソコンについてるメモ帳などにコピーしてください
すこし長いですよ。。

<script language="JavaScript"> <!-- var sBtnStl ="{font-size:10px;color:orange;text-align:center;border:1px solid #666;background:#fff;width:100px;}" function toggleOpenClose(id,val){ if(val == "Close"){ document.getElementById(id).style.display = "none"; document.getElementById('btn' + id).value = "Open"; } else{ document.getElementById(id).style.display = "block"; document.getElementById('btn' + id).value = "Close"; } } function getButton(obj, i , sInner , bDefaut){ var ret; var val; if ( bDefaut ) { val = "Close"; } else { val = "Open"; } ret = '<label for="btncolumn' + i + '">' + sInner + '</label><br/>'+ '<input type="button" style= "' + sBtnStl + '" value="' + val + '" id="btncolumn' + i + '" onclick="toggleOpenClose(\'column' + i + '\',this.value);"/>'; obj.setAttribute("id", 'column' + i); return ret; } var aryTitle = new Array(); var aryDefault = new Array(); aryTitle[0] = "カテゴリー"; aryDefault[0] = false; aryTitle[5] = "アーカイブ"; aryDefault[5] = false; aryTitle[10] = "メロメロパーク"; aryDefault[10] = false; aryTitle[15] = "サイシン コメント"; aryDefault[15] = false; aryTitle[20] = "サイシン トラックバック"; aryDefault[20] = false; var aryDiv = document.getElementsByTagName("div"); var sTmpInner; for(var j = 0; j < aryDiv.length; j++){ if(aryDiv[j].getAttribute("class") == "sidetitle" || aryDiv[j].getAttribute("className") == "sidetitle"){ sTmpInner = aryDiv[j].innerHTML; for(var i = 0; i < aryTitle.length ; i++){ if (sTmpInner.indexOf(aryTitle[i]) != -1 ) { aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]); } } } } if(document.getElementById){ document.writeln('<style type="text/css" media="all">'); document.writeln('<!--'); for(var i = 0; i < aryDefault.length ; i++){ if( aryDefault[i] ){ document.writeln('#column' + i + '{display:block;}'); } else { document.writeln('#column' + i + '{display:none;}'); } } document.writeln('-->'); document.writeln('</style>'); }//--> </script>

わかりやすいように、あおが使ってる構文そのままです
これから、内容を自分のブログでも使えるように変更していきます★

●●１　開閉したいプラグインの設定（重要！）

まずは、真ん中あたりを見てください

aryTitle[0] = "カテゴリー";
aryDefault[0] = false;

aryTitle[5] = "アーカイブ";
aryDefault[5] = false;

。。というのが並んでいると思います

aryTitle[0]には開閉したいプラグインの名前、
aryDefault[0]には、状態（最初から開いているか閉じているか）を記入してください
　「false;」は閉じた状態
　「true;」は開いた状態です
　うちのは全部閉じた状態です
増やしたい場合は、同じように数字を増やして記入していってください
（数字は何でもＯＫですが、必ず上下同じ数字にしてください）
減らしたい場合はさくっと削除してください

他のところは書き換えなくても作動しますが、プラグインの名前だけは自分のブログで使っているものを記入しないと動きません！


●●２　ボタンのデザイン（お好みで）

上の方にある

var sBtnStl ="{font-size:10px;color:orange;text-align:center;border:1px solid #666;background:#fff;width:100px;}"

。。がボタンのデザインです
font-size:10px;　文字の大きさ
color:orange;　文字の色（#000000というカラーコードでもちろんＯＫ）
text-align:center;　文字の位置（中心）
border:1px　線の太さ
solid #666;　線の種類（直線）と色
background:#fff;　背景の色
width:100px;　大きさ（横幅）
ここはお好きなデザインに変更してください

詳しくはinfinite loopサマのこの記事が参考になりますよ★


●●３　ボタンの文字（お好みで）

同じく上の方に↓こういうのがあります

function toggleOpenClose(id,val){
if(val == "Close"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "Open";
}

else{
document.getElementById(id).style.display = "block";
document.getElementById('btn' + id).value = "Close";
}

}

function getButton(obj, i , sInner , bDefaut){
var ret;
var val;
if ( bDefaut ) {
val = "Close";
} else {
val = "Open";
}

ちょっと長いですが、赤文字（２個）が「開く」、青文字（３個）が「閉じる」というボタンです
あおは「Open」と「Close」にしてます
この文字を変更するときは、それぞれ全部変更してください
あと、「開く」「閉じる」を同じ名前にしちゃうと動作しません××


●●４　フリーエリアに記述（がんばれ！）

さて、出来上がった構文をブログに反映させるために、プラグインのフリーエリアに挿入します
このときに注意するのが、「開閉したいプラグインの下に配置する」ということです
一番下だと問題ないんですが、ここで更なる問題が！！！
構文だけを記入したプラグインがあると、サイドバーにタイトル部分だけで内容がないプラグインが出来ちゃうんですね（o´□｀o）

それはかなりかっこ悪いので、別のことで使用しているフリーエリアに書き足すというのがオススメです

あおは、サイドバーの一番下にある「オススメ　サイト」に記述していますが、まったくわかりません（o・∀・o）


●●５　動作チェック

さて、ここまで終わったら設定を保存し、プラグインの再構築です
自分のブログをチェックしてみてください★


もし「ボタンは設置されてるけど、開閉しない」という状態でしたら、構文の下の方にある「aryDiv[j+1]」を「aryDiv[j+2]」にしてみてください

これで大丈夫なはずです（o・∀・o）お疲れ様でした
もし駄目なようでしたら、コメントください〜

Comments

初めましてっっ

開閉コラムを設置したくて、こちらのページをみながら、やってみたんですが。。
フリーエリアに貼り付ける。。ところでつまづいていますΣ(|||▽||| )
カスタム→フリーエリアで貼り付け、再構築したのですが、エラーが出てしまい、表示されません。。

貼り付ける場所が違う？貼り付け方が違うのでしょうか？
アドバイスよろしくお願いしますっっ！！

Posted by サラ★ベラム at April 23, 2006 15:29

さきほどコメントした者です！

なんとか設置に成功しましたε−(;ｰωｰAﾌｩ…

おさわがせしました。。

ありがとうございましたっっ

Posted by サラ★ベラム at April 23, 2006 17:40