一番簡単な折りたたみ 
2005 12 10
Sat 13:00:45

◆ カスタマイズ  ◆ Comment 4  ◆ Trackback 1  ◆ edit.

自分の所では、開閉スクリプトは既に記事とメニューの一部でしか使わなくなりましたが、簡単なスクリプトが有るのでそれをご紹介します。
ネコネコバージョンから使って居るのですが、スクリプトが簡単で設置もそれほど難しくないです。
では。解説。
（本来ならスクリプト制作者さんへリンクを張りお礼の気持ちを込めてご紹介したいのですが、制作者さんが誰なのか入手自体どこで行ったのか定かでは無いため、無断でご紹介する事に成りましたがご容赦願います。）
スクリプト自体は以下のものに成りますので<head>内に貼り付けて下さい。

<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//-->
</script>


後は例を使ってメニューを開閉させてみましょう。

改造前。

<dl>
<dt>最近のコメント</dt>
<dd>
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>" title="”<%rcomment_etitle>”へのコメント"><%rcomment_name>:<%rcomment_title></a>(<%rcomment_month>/<%rcomment_day>)</li>
<!--/rcomment-->
</ul>
</dd>
</dl>


改造後。

<dl>
<dt><a href="javascript:void(0)" onclick="dd('rcomment')">最近のコメント</a></dt>
<dd style="display:none" id="rcomment">
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>" title="”<%rcomment_etitle>”へのコメント"><%rcomment_name>:<%rcomment_title></a>(<%rcomment_month>/<%rcomment_day>)</li>
<!--/rcomment-->
</ul>
</dd>
</dl>


とこんな感じに改造されます。
ここで重要なのは、<a href="javascript:void(0)" onclick="dd('rcomment')">の部分と style="display:none" id="rcomment"を追加するという事です。
説明すると、タイトルの<a href="javascript:void(0)" onclick="dd('rcomment')">最近のコメント</a>をクリックすると id="rcomment"で括られた部分が開閉される訳です。
例では、style="display:none"（表示しない）と言う設定を行っているので、ページを開いた時の初期設定では閉じられている状態です。
この　display:none　をスクリプトがdisplay:　と言うようにnoneを消す事で表示される訳です。
カスタマイズするために重要なのは、 onclick="dd('rcomment')"の括弧の中（rcomment）と 隠される部分の　id="rcomment"　が同じ名前であればその部分を処理するという事をしっかりと把握して下さい。
後は、この部分を自分なりに名前を考えて別のメニューへ応用すれば良い訳です。
勿論、タグ（ここではdtとddを使って居ます）はdivでもpでも構いません。

<div><a href="javascript:void(0)" onclick="dd('rcomment')">最近のコメント</a></div>
<div style="display:none" id="rcomment">
<ul>
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>" title="”<%rcomment_etitle>”へのコメント"><%rcomment_name>:<%rcomment_title></a>(<%rcomment_month>/<%rcomment_day>)</li>
<!--/rcomment-->
</ul>
</div>


と言うような構造でも使える訳です。
それに他のスクリプトなどでは、番号を使って居たりしましたが、タイトルと同じ英文を使う事で分かりやすいカスタマイズと成るでしょう。

まぁ〜この手のカスタマイズは色々と有るので、もっと簡単な仕組みも有るかも知れませんが、私は色々試してこれが一番簡単なスクリプトかなと。
以上、既に語り尽くされた感がある｢メニュー開閉スクリプト｣のカスタマイズ法でした。

◆ ジャンル [ ブログ ]  ◆ テーマ [ カスタマイズ ]

◆ Re comments.

◆｢はじめまして。｣
今回、初めてのカスタマイズをしてみようと思い、
こちらの記事を参考にさせていただきました。
知識不足で理想的には出来なかったものの、サイドバー部分の
折り畳みには成功しました！（記事は出来なかったのですが＾＾；
記事部分はまた勉強してから再度チャレンジしてみたいと思います。
ありがとうございました　m(_ _)m
◆2006/07/07(金) 13:48:54 [URL] モンビッケさん [編集]
◆｢モンビッケさん初めまして｣
どうもはじめまして。
私の記事もあまり詳しいと言えない部分がありますので(^^;
それでもお役にたてて嬉しい限りです。
記事部分に関しては、このスクリプトと言うより、テンプレートに搭載済みのスクリプトを使った方が良いと思いますよ。(^^;
◆2006/07/08(土) 01:22:35 [URL] 有希之武さん [編集]
◆｢はじめまして( ´･ノ。･`)ｺｿｯ｣
上にいるモンビッケさんの友人です( ´･ノ。･`)ｺｿｯ
モンビッケさんの紹介で開閉カスタマイズを使用させて頂きましたm(_ _)m
それで、上記のスクリプトの応用で、リンクのカスタマイズが出来たので、応用テキストを書かせていただこうかなと思います。
書き終わりましたらトラックバック付けさせてもらいますね( ´･ノ。･`)ｺｿｯ
◆2006/08/03(木) 21:54:34 [URL] 蒼月さん [編集]
◆｢蒼月さんどうも｣
スクリプトの応用ですかぁ〜
リンクのカスタマイズという事ですが、どんな風になるのか楽しみですね。(^ー^)
元々このスクリプトは、ネット上で基本として有るものを改造したものなので応用が出来るとは思いますが、私には想像も出来ません(^^;
う・・・ん？？（想像）

想像出来ない（笑）
◆2006/08/03(木) 22:39:52 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  ◆注意　名前、タイトル、本文を入力する事で投稿可能になります。

◆ Trackbacks.

リンクのカテゴリー化と開閉化 2006/08/03 22:43:05 ◇ 蒼月奇譚
リンクが増えてくると、どうしてもサイドバーの縦幅が長くなっちゃうよね？そんな方に使えるテクニック( ´･ノ。･`)ｺｿｯリンクをカテゴリー化しながら、開閉できるようにする技をご紹介します（-。☆）ｷﾗﾘ例え
↑HOME