Movable Type 備忘録

 サイドバーを折りたたむ

  • Jan092006
  • Vote:
    http://bizcaz.com/archives/2006/01/09-022723.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

わたしのブログは人気がないのでコメントとか、トラックバックが少ないから問題ないのですが、みなさんのブログには必要なはず!!
そう、サイドバーに最近のエントリや最近のトラックバックなどを一覧表示していると、少ないうちはいいのですが、数が多くなると煩わしくなりませんか!?

今さらですが、必要なときだけ一覧表示可能な、サイドバーの折りたたみについてTRYしてみようと思います。

今回参考にさせていただいたサイトはダイズバタケ様です。

カスタマイズ方法

サイドバーの折りたたみには、JavaScriptを使用します。
以下のコードはクリックのたびにリストを表示したり、たたんだりするJavaScriptです。

  1. function toggleFold(sender, id) {
  2.   var elm = document.getElementById(id);
  3.   if (elm.style.display == "none") {
  4.     elm.style.display = "block";
  5.     sender.className = "unfolded";
  6.   } else {
  7.     elm.style.display = "none";
  8.     sender.className = "folded";
  9.   }
  10. }

上記コードをファイルに保存します。
保存ファイル名は任意ですが、例えば folding_sidebar.js という名前で保存します。

保存したJavaScriptをアップロードします。
先ほどの folding_sidebar.js というファイルをサーバーにアップロードします。

アップロードする場所はどこでも構いません。各自の環境に合わせてアップロードしてください。
index.html と同じディレクトリなんかいいかも、です。

サイドバー折りたたみのコードを埋め込みます。
以下のコードを、折りたたみたいところと差し替えてください。

  1. <script type="text/javascript" src="folding_sidebar.js"></script>
  2. <h3 class="unfolded" onmousedown="toggleFold(this, 'sidebar_menu');">最近のコメント</h3>
  3. <div id="sidebar_menu" style="display: block;">
  4. 　例えば、コメント一覧など…
  5. </div>

上記コードは、デフォルトでは開いておきたい場合のコードになります。
以下は、デフォルトでたたんでおきたい場合のコードです。

  1. <script type="text/javascript" src="folding_sidebar.js"></script>
  2. <h3 class="folded" onmousedown="toggleFold(this, 'sidebar_menu');">最近の記事</h3>
  3. <div id="sidebar_menu" style="display: none;">
  4. 　例えば、記事一覧など…<br />
  5. </div>

いずれも、青い字の部分の名前を合わせるところがポイントです。
また、複数のサイドバー折りたたみを行う場合には、それぞれ別々な名前をつけます。

例えば、カテゴリ一覧なら category_menu とし、コメント一覧なら comment_menu などとします。

スタイルシートを変更します。
スタイルシートに以下のスタイルを追加します。

  1. /*開くマーク*/
  2. .folded {
  3.   background-image: url(./image/folded.gif);
  4.   background-repeat: no-repeat;
  5.   background-position: 5px center;
  6. }
  7. /*閉じるマーク*/
  8. .unfolded {
  9.   background-image: url(./image/unfolded.gif);
  10.   background-repeat: no-repeat;
  11.   background-position: 5px center;
  12. }

青い時の部分を、各自の環境に合わせて変更します。
イメージファイルは、 でよければお持ちください。
置き換えが完了したら、いつものように保存して再構築してください。

以上で、サイドバーの折りたたみができました。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード