livedoorBlogサポート同盟
TOPページへ
食と日記:毎日の食と日記 ブログ:ブログカスタマイズ教室 オススメ:食のオススメ こうさぎ:こうさぎ関連 リンク:お世話様ですリンク 掲示板:ご意見・ご感想・リクエストなど何でもどうぞ

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

August 27, 2004


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

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


1.コラム開閉って?

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

2.コラム開閉スクリプト

コラム開閉がどんなものなのかわかっていただいたところで、さっそく本題へ入りたいと思います。
私の使っているスクリプトをお持ち帰り用に修正してみたんで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 = "▼";
        }

このスクリプトの中の「▲」と「▼」の部分をお好きな文字列に変更できます。
「▲」が、コラムが開いているときに表示される文字列(つまり、閉じるボタンです)。
合計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」などに適当に変更してください。

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


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

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

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の部分に貼り付けます。
これで、ブログを再構築。
自分のブログを開いて、スクリプトが動いていることを確認してください。

3.開閉ボタンの装飾

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

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

「columntitle」はコラム開閉をするプラグインの名前の部分です。
プラグインの他の部分と同様の表示にしたい場合は、「.sidetitle」と同じ指定にしてみてください。
ちなみに私のブログでの指定は以下の通りです。


「btncolumn」はコラム開閉ボタン自身です。
ボタンの中の文字の大きさや色、位置、ボタンの枠の色、背景色、大きさを指定できます。
ちなみに私のブログでの指定は以下の通りです。


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



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

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

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



posted by すい at 03:11 │ブログ↑PageTop↑
EditDelet
トラックバック

開閉コラム、もう手をつけないつもりだったけど なんとな〜くやってみたら・・・できた!(?_?)エ? この前からお世話になってる「食と日記とウェブログと」さんのをもう一度チェックしながら、そして新たに「infinite loop」さんのボタン位置指定も参考にさせてもらいま
by できた〜〜〜!【Masu's Diary】at August 30, 2004 10:03
コラム開閉ボタンをつけてみたよ♪ありがとうございました。
by ■コラム開閉ボタンをつけてみたよ【BLOGわん】at September 04, 2004 02:12
すいさんの「食と日記とウェブログと」のコラム開閉スクリプトを参考にして、またしても少しブログをいじってみましたーー。 でもタイトルのすぐ横にボタンついちゃってるなぁ。どうやったら直るんだろこれ。...
by コラム開閉【◆ Have an easy time ◆ 】at September 05, 2004 13:24
コラム開閉完了!
by コラム開閉ー【海豚の戦争】at September 07, 2004 16:14
画像はON/0FFマウス変化をします。画像にマウスを乗せてみて下さい。 9月06日に当Blogのサイドメニュで採用しました。 必要以上に長くなったサイドメニュをこの開閉式(コラム)ですっきりです。 アンテナ(Myblog List)には適用しませんでした。 開閉式コラムの設.
by コラム開閉【横浜刹那主義】at September 07, 2004 22:38
これまではサイドバーが長すぎてダラダラ。 それがずーっと気になっていたので、 サイドバーを左右に置く3カラムと 開閉式サイドバーを導入しました。 3カラムについては小春日和の陽射しの中でさんのところを参考にしました。かなり詳しく書いてあるので、不器用な.
by 再度、リニューアルしました【恐れ入ります 競馬Blog】at September 25, 2004 00:04
大変参考になりました! ありがとうございます。
by リニューアル【円満家族…かな?】at October 02, 2004 11:58
細かいカスタマイズばっかりしてます(笑) 画面右にある「サイドバー」を開閉できるようにしました。 「+」とか「-」とか、押してみてくださーい。開いて閉じて、楽しいっすよ♪ (「プロフィール」と「おすすめの本」は、また後ほど載せます。すいません) 以前もお.
by コラム開閉、検索窓、タイトル一覧【韓国語お勉強中】at October 03, 2004 14:22
頂いたスクリプトをやっと、手直ししてみました。 間違ってたら、教えてくださいね。
by ■コラム開閉ボタンを手直ししたよ【BLOGわん】at October 03, 2004 22:02
このところ、ブログを改造しています。 1.リンク集  右下にズラ〜と並べてあったリンク集、数が増えたので、  別ページにまとめました。  右枠のCategoriesの中から飛べます。    *Blogのリンクはこれまで通り、右下についています。   「wanna visit?.
by ブログ改造中【こぜ日記】at December 17, 2004 13:15
憧れのコラム開閉を導入!seesaa ユーザ向けに補足説明をしてみました。
by ぷちリニューアル その2−コラム開閉スクリプト【ちゃっぴーのひとりよがり】at April 03, 2005 11:18
seesaaのサイドバーを折りたたんでみました。 参考にしたのは、色と日記とウェブログさまの「[ブログ]番外編 コラム開閉スクリプト」です。 livedoorの記事ですが、seesaaでも使えるようです。 1.折りたたみスクリプトをコピーします。 ここでは、ボタンに表示する文字を設
by seesaaのサイドバーを折りたたむ【KOROPPYの本棚】at April 07, 2005 15:10
色々なblogを拝見していて、やってみたいなあ、ってことがいっぱいあるんですが とりあえず、サイドタイトルの折りたたみに挑戦してみました。 参考にさせていただきましたのは 食と日記とウェブログとさんの[ブログ]番外編 コラム開閉スクリプト ちゃっぴーのひとりよ
by サイドタイトルの折りたたみ【あこのもと】at April 14, 2005 16:37
サイドバー折りたたみにやっと成功いたしました。 参考にさせていただいたのは、こちらです。 色と日記とウェブログさまの、「[ブログ]番外編 コラム開閉スクリプト」 BLOGわんさまの、コラム開閉ボタンを手直ししたよ とても参考になりました。ありがとうござ.
by 初心者のサイドバー折りたたみbylivedoor【my memory】at April 27, 2005 10:37
サイドバー折り畳み無事できました。ありがとうございます。  注意点は現在JSファイルとしてJavaScriptがlivedoorサーバーに あげられないので外部のHPスペースに…
by サイドバー折り畳み【かっぱの胃袋】at May 12, 2005 23:39
Blog Peopleに登録しました。 で、関連ツールを設置するために、 サイドバーをいじりました。
by サイドバーをカスタマイズ。【サンフランのもっとお日さまサンサンサン】at June 05, 2005 22:16
最近、他のBlogなどでサイドメニューが 折りたためるようになっているのをよく見るようになって、 自分も色々調べて導入してみた。 只、いまいち設定が思いどうりに決まらない! 地道に勉強していくしかないかな。 こうやって、Blogを初めてカスタマイズをしていく.
by Blog カスタマイズ [Sideの折りたたみ化]【Groovey remix】at June 12, 2005 20:32
連載小説を中心なブログですが、 カスタマイズな記事も書こうかなぁ・・・という気の迷いで載せる事にしました。 参考にはならないと思いますが~(=^‥^)†~~~ 今回はコラム開閉スクリプトについてです。...
by カスタマイズ 【開閉スクリプト】【Lunatic龍雅のドラゴンテイル】at July 02, 2005 16:18
やっとの事で、リニューアル後に動いていなかった、 サイドのツリー化及び折りたたみが動くようになりました! サイドのツリー化に関してはscripts for livedoorさんのツリー化スクリプト ver 0.2 for livedoorを利用させていただき、 3カラムの為、スクリプトのgetElem...
by ようやく【Groovey remix】at August 16, 2005 06:32
パンパでガウチョさんちのコラムの開閉スクリプトを活用させて頂いていたのですが、リニューアルの影響で動作しなくなってました。『コラムの開閉』で検索してたのですが、なかなか良い情報を見つからないので残念に思ってました。 食と日記とウェブログとさんちをうろうろ....
by サイドバーのコラムの開閉【いごっそうの部屋】at August 20, 2005 00:18
パンパでガウチョさんちのコラムの開閉スクリプトを活用させて頂いていたのですが、リニューアルの影響で動作しなくなってました。『コラムの開閉』で検索してたのですが、なかなか良い情報を見つからないので残念に思ってました。 食と日記とウェブログとさんちをうろうろ....
by サイドバーのコラムの開閉【いごっそうの部屋】at August 20, 2005 00:21
パンパでガウチョさんちのコラムの開閉スクリプトを活用させて頂いていたのですが、リニューアルの影響で動作しなくなってました。『コラムの開閉』で検索してたのですが、なかなか良い情報を見つからないので残念に思ってました。 食と日記とウェブログとさんちをうろうろ....
by サイドバーのコラムの開閉【いごっそうの部屋】at August 20, 2005 00:23
何故かシーサー( seesaa )の折り畳みについて覚え書き… 1.下記のスクリ...
by シーサー( seesaa )のサイドバーを畳む( コラム開閉!?)【ginzi.com/blog】at September 02, 2005 14:29
何故かシーサー( seesaa )の折り畳みについて覚え書き… 1.下記のスクリ...
by シーサー( seesaa )のサイドバーを畳む( コラム開閉!?)【ginzi.com/blog】at September 02, 2005 15:38
コメント開閉スクリプト(サイドバーの折り畳み)を導入してみました。 色々な記事があって、どれでやっても最初は出来なかったのですが、 最近のlivedoorのBlogでは"sidetitle"と"side"の間に"sidetop"というタグがはいることがあるみたいで....
by コメント開閉ボタンを設置しました(livedoorブログでは注意が)【ん〜?( ̄〜 ̄;)】at October 22, 2005 19:51