2005年10月10日

サイドバーの折りたたみ設定

サイドバーの折りたたみ設定
本文 文字コード EUC-JP 形式 JavaScriptで保存のできるテキストエディタが必要です。
私はフリーソフトの「TeraPad」をDLしました。
function toggleOpenClose(id,val){
if(val == "▲"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "▼";
document.getElementById('btn' + id).className = "btnunfold";
}
else{
document.getElementById(id).style.display = "block";
document.getElementById('btn' + id).value = "▲";
document.getElementById('btn' + id).className = "btnfold";
}
}
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;
}
var aryTitle = new Array();
var aryDefault = new Array();

/* 折りたたみ箇所指定 */
aryTitle[1] = "サイドタイトル";
aryDefault[1] = true;

aryTitle[2] = "サイドタイトル";
aryDefault[2] = 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>');
}

サイドタイトルを折りたたみたいコンテンツの名前を記入
デフォルト表示で開いている状態は「true」閉じている状態が「false」です。
必要な分だけ下に追加して下さい。
2行で1セットです。
ここまでをファイルに保存してファイルマネージャでupしhttpを確認しておく。

次に「デザイン」→「コンテンツ」で「自由形式」をサイドバーの一番下(両サイドバーの場合は右の一番下)に追加して下記の記述を入力

httpの部分は先程upしたものに修正
保存→再構築で完了
ここまでで折りたたみの設定は終了

下記からはデザインの設定です。
「デザイン」→「スタイルシート」でCSSに下記の記述を入力
/* 折りたたみボタン▲ */
.btnfold{
font-size:8pt;
color:#色コード;
text-align:center;
border:1px solid #色コード;
background:#FFFFFF;
height:14px;
width:14px;
float:right;
margin-top: -15px;
}
/* 折りたたみボタン▼ */
.btnunfold{
font-size:8pt;
color:#色コード;
text-align:center;
border:1px solid #色コード;
background:#FFFFFF;
height:14px;
width:14px;
float:right;
margin-top: -15px;
}

色コードの部分を設定したい色コードに修正。


posted by nekobaba at 20:13| Comment(0) | TrackBack(0) | Blog設定 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。