2007年05月31日

2007 05.31 Thu


コンテンツ(サイドメニュー)のコラム開閉スクリプト。
比較的、設置に簡単な、難易度の低いものを選びました。

[1] HTMLの追加(デザイン⇒HTML編集)
以下のjavascriptを、</body>の直前に追加します。
<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">'+
'<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>';
obj.setAttribute("id", 'column' + i);
return ret;
}

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

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

aryTitle [1] = "新着記事";
aryDefault[1] = true;

aryTitle [2] = "カテゴリ";
aryDefault[2] = true;

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

aryTitle [4] = "最近のトラックバック";
aryDefault[4] = 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>


△▼は、お好みで変更してください。(特にいじらなくて可)
・/* ここから2行ずつひとまとまり */ 〜 /*----ここまでの間に開閉させたいコラムの数だけコピペして修正----*/は、あなたのブログの「サイドバー」のタイトルに書き換えます。開閉処理をやりたいカテゴリ名と、初期表示で表示する(true)か表示しない(false)かを指定します。[?]は、2行ごとに[1][1] [2][2]と増やしていきます。

[2] スタイルシート(CSS)の追加(デザイン⇒スタイルシート)
・私の『.sidetitle』は、以下です。
.sidetitle {
color: #fff;/*■見出し部分の文字色*/
background: #699;/*■見出し部分の背景色*/

margin: 0 10px;
padding: 4px 10px;
text-align: left;
font: bold 12px Verdana, sans-serif;
border-bottom: 3px solid #ccc;
}

color: #fff;/*■見出し部分の文字色*/
background: #699;/*■見出し部分の背景色*/
を参考に、以下を追加します。
.columntitle{
border: 0;
margin: 0;
padding: 0;
}
.btncolumn{
color: #fff;/*■見出し部分の文字色*/
background: #699;/*■見出し部分の背景色*/

border: 0;
margin: 0;
padding: 0;
}

・『color』と『background』は、ご自分の『.sidetitle』の設定に合わせてください。


参考:
[ブログ]番外編 コラム開閉スクリプト
サイドメニューの折りたたみ(v4.0)


本当はサイドバーのコンテンツタイトルを
そのままボタンにしたいんだけど、設置が面倒臭い(´Д`)

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:(http:を省略して下さい)
http:
コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.