ginzi.com::blog

/* コラム開閉スクリプト */
function toggleOpenClose(id,val){
if(val == "▲"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "▼";
}
else{
document.getElementById(id).style.display = "block";
document.getElementById('btn' + id).value = "▲";
}
}

function getButton(obj, i , sInner , bDefaut){
var ret;
var val;
if ( bDefaut ) {
val = "▲";
}
else {
val = "▼";
}
ret = '<div align="left">'+'<label for="btncolumn' + i + '" class="columntitle">' + sInner + '</label>'+'<input type="button" value="' + val + '" id="btncolumn' + i + '" class="btncolumn" onclick="toggleOpenClose(\'column' + i + '\',this.value);"/>' + '</div>'; obj.setAttribute("id", 'column' + i); return ret; }
var aryTitle = new Array();
var aryDefault = new Array();

/* ここから２行ずつひとまとまり */
/*----ここから----*/

aryTitle[1] = "Search";
aryDefault[1] = false;

aryTitle[2] = "Harbot";
aryDefault[2] = true;

/*----ここまでの間に開閉させたいコラムの数だけコピペして修正----*/

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('');
}

適当なテキストエディタに、上記のスクリプトを EUC の文字コードで保存する。ファイル名例｢sidebarfold.js ｣など。
※.文字コードがEUCでないと動作しないので気をつけて下さい。

2.スクリプトを修正する
1で保存したスクリプトを修正します。修正箇所は上記の30行目辺りの場所。

/* ここから２行ずつひとまとまり */ /*----ここから----*/

aryTitle[1] = "Search";
aryDefault[1] = false;

aryTitle[2] = "Harbot";
aryDefault[2] = true;

/*----ここまでの間に開閉させたいコラムの数だけコピペして修正----*/

aryTitle と aryDefault をワンセットで修正します。
aryTitle はサイドバー見出しを記入。
aryDefault はブログを開いた時に開けてる状態にするか、しないか。( ture=開けた状態。false=閉めた状態 )

例：
サイドバーの見出しが左図のように並ばれてるのであれば、上から
最近のコメント( [1] ) →
新着記事( [2] ) →
BlogPet( [3] ) →
ミニBBS( [4] ) →
ハイクブログ( [5] ) →
写真日記( [6] )となります。

よって、スクリプト修正箇所は下記のように記述することになります。

/* ここから２行ずつひとまとまり */ /*----ここから----*/

aryTitle[1] = "最近のコメント";
aryDefault[1] = true;

aryTitle[2] = "新着記事";
aryDefault[2] = false;

aryTitle[3] = "BlogPet";
aryDefault[3] = false;

aryTitle[4] = "ミニBBS";
aryDefault[4] = true;

aryTitle[5] = "ハイクブログ";
aryDefault[5] = false;

aryTitle[6] = "写真日記";
aryDefault[6] = true;

/*----ここまでの間に開閉させたいコラムの数だけコピペして修正----*/

3.スクリプトをUPする
2で修正したスクリプトをサーバーにアップロードします。
アップロード先はツール ＞ ファイルマネージャー。ディレクトリは適当な場所。タイトルに〝折り畳みスクリプト〟とか適当な名前を付けてUPして頂ければ良いと思います。

UPし終わったら、アップロード先を覚えておいて下さい。
タイトルをクリック → クリック先の〝元ファイル〟のところに記述されます。

4.コンテンツにスクリプトを反映させる
デザイン ＞ コンテンツの画面でコンテンツの追加を行います。

新しいコンテンツの追加から、　　　
　　　

種類 → ｢自由形式｣
追加先ページ → ｢全ページ｣
配置 → ｢右サイドバー｣※
並び順 → ｢99｣※

に設定し、自由入力欄に下記のスクリプトを貼り付けます。
※.並び順は右下に入れた方が良いと思います。

<SCRIPT language="JavaScript" type="text/javascript" src="3のURL" charset="EUC-JP"></SCRIPT>

｢3のURL｣と書かれているところには、先程3でアップロードしたスクリプトの保存先を記述して下さい。

例："http://hogehoge.seesaa.net/blog/sidebarfold.js"等

スクリプトを張り付け終わったら再構築。以上の作業で動作すると思います。

5.ボタンの配置を変える
ボタンの配置を変えるために、デザイン ＞ スタイルシートのところの、スタイルシートに下記のコードを記述します。(場所は適当。とりあえず一番下でオッケ)

/* 折りたたみボタン */
.btncolumn{
font-size:8pt;
color:#5F5F5F;
text-align:center;
border:1px solid #BFBEBA;
background:#FFFFFF;
height:14px;
width:14px;
float:right;
margin-top: -15px;
}

以上です。お疲れ様でした。。。

参考サイト
　　　・食と日記とウェブログとさん｢番外編　コラム開閉スクリプト｣より

なお、詳しいことは食と日記とウェブログとさんのサイトを参照してみて下さい。