[ブログ]番外編 コラム開閉スクリプト

先日鳥頭堂さんとますみさんからほぼ同時に質問をうけたコラム開閉。
いろんなところで説明はあるかと思いますが、せっかくご質問いただいたので、やり方だけでも記事にしておこうかと思います。

いつもと違ってそんなに細かくは説明しません。
理屈を知りたい方はJavaScriptを勉強してみてください。

１．コラム開閉って？

コラム開閉ってなんぞやと、思われる方もいるかと思いますので簡単に説明しておきます。
コラム開閉とは、サイドバーの各プラグインを見せたり見せなかったりする機能です。
例えば、月ごとのアーカイブってそんなに使うことないですよね。
ないと不便だけど、普段はそんなに使わないし、ブログを長く続ければ続けるほど増えていくので、
どうしても長くなってしまってレイアウトの邪魔になってしまいます。
こういうプラグインを、普段は見せないで、必要なときはちゃんと見れるようにするための仕掛けが
コラム開閉スクリプトなのです。
サイドバーがふくれあがってしまってお困りの方は、3カラム化もひとつの手ですが、
このコラム開閉もかなりオススメです。

２．コラム開閉スクリプト

コラム開閉がどんなものなのかわかっていただいたところで、さっそく本題へ入りたいと思います。
私の使っているスクリプトをお持ち帰り用に修正してみたんでCtrl+Aですべて選択、コピーしてご利用ください☆

/* コラム開閉スクリプト */ 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('<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>'); }

このスクリプトは私が書いたわけではなくて、どこかからいただいたものなのですが、どこからいただいたのかわからなくなってしまいました・・・申し訳ありません。。
で、もちろんこれをこのままコピペしても動きません。
続いてそれぞれのブログで変更していく箇所を説明します。

まず、コラム開閉のボタンに書かれるものの指定です。
スクリプトの上の方を見てください。

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 = "▼";
        ｝

このスクリプトの中の「▲」と「▼」の部分をお好きな文字列に変更できます。
「▲」が、コラムが開いているときに表示される文字列（つまり、閉じるボタンです）。
合計3ヶ所記述するところがあります。
「▼」が、コラムが閉じているときに表示される文字列（つまり、開くボタン）。
合計2ヶ所に記述します。

どことどこが同じ文字列なのか、その組み合わせを間違えないようにしてください。

続いて、開閉ボタンの位置を指定します。
先程のスクリプトのすぐ下です。

    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;
    }

この、緑色の部分（プラグインタイトル）と青色の部分（開閉ボタン）を入れ替えることでボタンの位置を変更できます。
このスクリプトでは、プラグインのタイトルの右側に開閉ボタンがくるようになっています。
さらに、プラグインタイトルの下に表示する場合は、
緑色の部分の後ろに「＋'＜BR＞'｣を加えてください。
また、「'＜div align="left"＞'」の部分は、ご自分のブログに合わせて「align=right」「align=center」などに適当に変更してください。

これらの操作をする際は、'（シングルクオーテーションマーク）の位置に気をつけてください。
タグは必ず'（シングルクオーテーションマーク）で囲まれています。

最後に、どこを開閉するのか、初期状態はどうするのかを指定します。
上記二つは全く変更しなくてもだいじょうぶですが、これはやらないと絶対に動きませんのでお気をつけください。

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

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

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

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

スクリプトの中にも書きましたが、この部分は「aryTitle」と「aryDefault」で始まる2つの行でひとまとまりです。
「aryTitle」の後ろ（ここではSearchやHarbotの部分）には、コラム開閉したいプラグインの名前を書きます。
「"掲示板：＜BR＞livedoorブログ"」のように、日本語もOK、途中でタグが入ってもOKです。
「aryDefault」の後ろは、「true」または「false」を書きます。
「true」は開いた状態、「false」は閉じた状態が初期状態になります。
「aryTitle」「aryDefault」のすぐ後の「[]」の中には、適当な数字を入れてください。
ひとまとまりは同じ数字です。

この、「aryTitle」と「aryDefault」のまとまりを、コラム開閉させたいプラグインの数だけ記述します。
ポイントは、ひとまとまりは同じ数字、プラグインの表示される順に数字をふっていくという点でしょうか。

ここまでできたら、このスクリプトを保存、アップしてみてください。
ファイル名は何でもかまいませんが、拡張子は「.js」です。

--8/28追記--
そして、保存形式は必ず「EUC-JP」でお願いします。
これ以外だとスクリプトが動きません。
手持ちのソフトでは「EUC-JP」で保存できないという方は、TeraPadなどのフリーのテキストエディタをDLして使ってみてください。
--追記ここまで--

管理画面＞ファイルのアップロードで「新規ファイルの追加」をクリック、アップします。
そのまま「記事を投稿する」を選んで、ファイルのURLを取得してください。
URLをコピーしたら、プラグインの追加で「JavaScript」の追加するボタンを押し、出てきたページのURLの部分に貼り付けます。
これで、ブログを再構築。
自分のブログを開いて、スクリプトが動いていることを確認してください。

３．開閉ボタンの装飾

さて、２でコラム開閉自体はできたかと思います。
最後に、コラム開閉ボタンの装飾についてちょっとだけ触れておきます。

コラム開閉ボタンの装飾は、CSSで行っています。
管理画面＞デザインの設定で「custom」を開いて、「columntitle」と「btncolumn」というクラスへの指定を追加してください。

「columntitle」はコラム開閉をするプラグインの名前の部分です。
プラグインの他の部分と同様の表示にしたい場合は、「.sidetitle」と同じ指定にしてみてください。
ちなみに私のブログでの指定は以下の通りです。
.columntitle{ color:#0105CF; font-size:xx-small; font-weight:bold; letter-spacing:3px; }

「btncolumn」はコラム開閉ボタン自身です。
ボタンの中の文字の大きさや色、位置、ボタンの枠の色、背景色、大きさを指定できます。
ちなみに私のブログでの指定は以下の通りです。
.btncolumn{ font-size:8pt; color:#0105CF; text-align:center; border:1px solid #0105CF; background:#E1F6FF; height:14px; width:14px; }

それぞれ私のブログでの指定を参考に、ご自分のブログに合うよう変更してみてください。

ざざざっと説明してしまいましたが、大丈夫でしたでしょうか？？
もしわからないことやスクリプトの不具合などございましたら、コメントや掲示板でお尋ねください。
私にわかる範囲でお答えします。

ちなみに断っておくと、私はJavaScriptはさほど詳しくありません。
なので質問されてもお答えできない場合もあるかと思いますがご了承くださいませm(_ _)m

ブログ教室の方は、まだ当分お休みです。
今回みたいに、「やり方だけでも教えて！！」っていうのがありましたら、
できるだけ優先して記事にしますので、お気軽にご質問ください。