■開閉スクリプト

シーサーでのサイドバーコンテンツ開閉スクリプト設置方法

一番下の参考リンク先も参照しながらやってみてください。

デザイン＞コンテンツ＞新しいコンテンツの追加
種類：「自由形式」
追加先ページ：必要に応じて（僕は「全ページ」）
配置／並び順：できるだけ後のほう（３カラムなら右サイドバーの高数値）

を選択。

以下を自由形式の入力欄にコピペ

<script type="text/javascript">
<!--
/* コラム開閉スクリプト */
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] = "自分について";
aryDefault[1] = false;

aryTitle[2] = "最近UPした記事";
aryDefault[2] = true;

aryTitle[3] = "月別ログ";
aryDefault[3] = false;

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

aryTitle[5] = "最近のトラックバック";
aryDefault[5] = true;

aryTitle[6] = "カテゴリ別ログ";
aryDefault[6] = false;

aryTitle[7] = "MyblogList";
aryDefault[7] = false;

aryTitle[8] = "有名人BLOG LIST";
aryDefault[8] = false;

aryTitle[9] = "BlogPeople LIST";
aryDefault[9] = 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[1] = "自分について";
aryDefault[1] = false;

aryTitle[2] = "最近UPした記事";
aryDefault[2] = true;

aryTitle[3] = "月別ログ";
aryDefault[3] = false;

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

aryTitle[5] = "最近のトラックバック";
aryDefault[5] = true;

aryTitle[6] = "カテゴリ別ログ";
aryDefault[6] = false;

aryTitle[7] = "MyblogList";
aryDefault[7] = false;

aryTitle[8] = "有名人BLOG LIST";
aryDefault[8] = false;

aryTitle[9] = "BlogPeople LIST";
aryDefault[9] = false;
/*----ここまで----*/

『"　"』と『［　］』の部分。
" "の中は自分のコンテンツで開閉させたいコンテンツ名を記入。
［ ］の中は見たとおり、順番はどうでもいいですがコンテンツごとの番号と思っていただけばいいです。開閉したいコンテンツが３個しかなければ当然３つしかなくていい。
必要に応じて加減してください。
ちなみに、この記述のなかにあるfalseやtrueの意味は
false＝閉じてる状態
true＝開いてる状態

したがって、各々の状態から開閉することになるわけです。

ここで一旦「保存」＞「変更（コンテンツの一番下のボタン）」

そしてもうひとつ。
スタイルシート＞タイトル（現在使用しているタイトルをクリック）

以下２つのタグをコピペしてください。
場所はどこでもいいですが、わかりやすく
.sidetitle ｛｝
の下がいいでしょう。

.columntitle{
background-color:#66CCCC;
background-repeat:no-repeat;
color:#FFF;
font-size:12px;
font-weight:bolder;
padding:10px 10px 5px 30px;
margin-bottom:10px;
text-align:center;
}

▲開閉ボタンまわり（コンテンツタイトル）のデザイン
.sidetitle ｛｝と同じ設定にした方がいいと思います。

.btncolumn{
font-size:10pt;
color:#0066FF;
text-align:center;
border:0px solid #0105CF;
background-color:#66CCCC;
height:14px;
width:14px;
}

▲開閉ボタン自体のデザイン

上記はあくまでも僕のブログのデザインですので各編集箇所は貴ブログにあわせていろいろ弄ってください。


【参考リンク】
■CHU*CHU　
■思いの袖丈