seesaaのサイドバーを折りたたむ

seesaaのサイドバーを折りたたんでみました。

参考にしたのは、色と日記とウェブログさまの「[ブログ]番外編　コラム開閉スクリプト」です。
livedoorの記事ですが、seesaaでも使えるようです。

1.折りたたみスクリプトをコピーします。
ここでは、ボタンに表示する文字を設定できます。
「▲」が開いているとき(ココログの「－」)、「▼」が閉じているとき(ココログの「＋」)です。

/* 折りたたみスクリプト */
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;
}

最後の「ret = ～</div>」で、サイドバーのコンテンツ名(=sidetitleの値)と開閉ボタンの順番を決めています。
私の記述では、名前→開閉ボタンの順で表示されます。
開閉ボタン→名前の順に表示するには、以下の記述に差し替えてください。

ret = '<div align="left">'+'<input type="button" value="' + val + '" id="btncolumn' + i + '" class="btncolumn" onclick="toggleOpenClose(\'column' + i + '\',this.value);"/>'+'<label for="btncolumn' + i + '" class="columntitle">' + sInner + '</label>'+'</div>';

またこの「<div align="left">」で、コンテンツ名の文字の配置を指定しています。
中央寄せにしたい場合は「center」を指定してください。

2.次に、開閉ボタンの設定をします。
「aryTitle」には、ボタンをつけたいコンテンツの名前(=sidetitleの値)を入れます。
「aryDefault」では、デフォルトでの折りたたみ状態を指定します。
開いておく場合は「true」、閉じておく場合は「false」にします。
[]内の数字は、1から連番にしていきます。
「aryTitle」と「aryDefault」の2行でワンセットなので、同じ値を入れます。

var aryTitle = new Array();
var aryDefault = new Array();

/* 折りたたみ箇所指定 */
aryTitle[1] = "新着記事";
aryDefault[1] = true;

aryTitle[2] = "最近のコメント";
aryDefault[2] = false;

3.折りたたみの処理部をコピーします。

/* 折りたたみ処理 */
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>');
}

4.手順1～3の記述をファイルに保存します。
文字コードはEUC-JP、形式はJavaScriptで保存します。
例》sidebarfold.js

5.「ツール」→「ファイルマネージャー」でこのファイルをアップロードします。

6.サイドバーの最下部に「自由形式」のコンテンツを追加します。
手順5でアップロードしたファイルのURLに変更します。

<SCRIPT language="JavaScript" type="text/javascript" src="http://***.seesaa.net/file/***.js" charset="EUC-JP"></SCRIPT>

7.再構築すれば、設置は完了です。

8.折りたたみボタンのデザインを変更するには、CSSに記述を追加します。
私はボタンの位置を右寄せにしました。

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

【補足】
ココログのように、ボタンの開閉で色を変更できると更にいいですね。

手順1とCSSを以下のように変えることで、起動時に開閉で色を分けることは出来ました。

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

/* 折りたたみボタン▲ */
.btnfold{
font-size:8pt;
color:#DB7093;
text-align:center;
border:1px solid #DB7093;
background:#FFFFFF;
height:14px;
width:14px;
float:right;
margin-top: -15px;
}
/* 折りたたみボタン▼ */
.btnunfold{
font-size:8pt;
color:#697497;
text-align:center;
border:1px solid #697497;
background:#FFFFFF;
height:14px;
width:14px;
float:right;
margin-top: -15px;
}

でもこれでは、起動時の色で固定になってしまうんですよね^^;
ボタンを閉じたり開いたりしたときに、うまく変わってくれないんです。

それから、折りたたみの状態保持もできないのですね。

【追記】
折りたたみの開閉で、ボタンの色を変えるよう変更しました。
詳しくは「seesaaサイドバー折りたたみボタンの色を開閉で変える」をご覧ください。