Movable Type 備忘録

サイドバーを折りたたむ２

Apr042006
Author: bzbell
Categories: Customize
Tags: JavaScript, Sidebar

Next Page: テクノラティにタグ情報を送信する
Prev Page: MovableTypeでモブログやってみよ２

以前、サイドバーを折りたたむで、サイドバーにあるカテゴリ一覧とか、コメント一覧、トラックバック一覧などを折りたたむ、JavaScriptを使用したカスタマイズについて紹介しました。

今回紹介するサイドバーを折りたたむカスタマイズも、基本的にはJavaScriptを使用するのですが、折りたたむ以外の機能もついています。

主な機能として、

サイドメニューを折りたたむことができる。
カテゴリ一覧のサブカテゴリ毎に折りたたむことができる。
メニュータイトル部分または、カテゴリー名横に折りたたみ用のリンクが表示され、そのリンクのクリックによりメニューリストの開閉を行うことができる。
メニュータイトル部分にリスト数を表示することができる。
折りたたみ状態をメニュー単位でCookieに保存される。
これにより、同じ折りたたみメニューを別ページで使用した場合、メニューの状態が全ページに反映されます。

があります。これらはJavaScriptのパラメータから設定可能です。

今回参考にさせてもらったサイトは、いつもお世話になっている小粋空間様です。

▼JavaScriptの入手はこちらから▼
http://www.koikikukan.com/scripts.php

カスタマイズ方法

まず、JavaScriptダウンロードします。
上記リンクより、menufolder.js というリンクがありますので、そちらからJavaScriptをテキストファイルにコピペしてください。

サイドメニューの折りたたみ設定を行います。
基本的にはデフォルト設定のままでも問題なくサイドメニューの折りたたみができます。

JavaScript内に設定内容にコメントが入っていますので、自分好みに変更をしてください。

例えば、デフォルトでは折りたたみマーク(▼、▲)は非表示になっていますが、マーク表示したい人は以下のように変更します。

273行目
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark =
false;

コメントにもあるように、青い字の部分を false から true に変更すればマーク表示されるようになります。
また、折りたたみマークも簡単に変更できます。

278行目
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '▼';
var closeMarkForSideBarMenu = '▲';

青い字の部分を ▼ ⇒ [+] 、▲ ⇒ [-] のように変更するだけです。
一通り自分好みの設定を行ったら、保存してください。

ファイル保存の際の文字コードは、わたしは UTF-8 で保存しましたが、各自の環境に合わせて menufolder.js というファイル名で保存します。

サーバーにアップロードします。
保存したらサーバーにアップロードします。アップロード先はどこでもかまいません。各自の環境に合わせてアップロードします。
ここでは、例としてメイン・ページ( index.html )と同じ場所に保存しています。

menufolder.js を使用する各テンプレートにタグを追加します。
<head>～</head>の間に以下のコードを追加します。

<script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="<$MTPublishCharset$>"></script>

青い字の部分を、先ほどアップロードしたJavaScriptの場所を指定します。
上記ではメイン・ページと同じ場所を指定しています。

折りたたみたいサイドバーのコードを変更します。
折りたたみたいサイドバーをそれぞれ以下のように変更します。

<div class="sidetitle" id="●●●name">タイトル名称</div>
<div class="side" id="●●●list">
  折りたたみたい内容
</div>
<script type="text/javascript">
<!--
FoldNavigation('●●●','on',false);
//-->
</script>

赤い字の部分にサイドバータイトル名を入れます。
青い字の部分には同じIDを入れてください。

例えば、カテゴリ一覧を折りたたみたい場合は、●●●=category とした場合、categoryname、categorylistというように変更します。
必ず、●●●name、●●●list というように、それぞれ name と list は含めて変更します。

このIDは必ずユニーク(ページ内で唯一)なものにしてください。
例えば、カテゴリ一覧と月別アーカイブで同じ、categoryname、categorylist としてしまうと、正しくサイドバーの折りたたみが行われませんので注意してください。

緑の字の部分は、サイドバーメニューの初期状態を指定します。
on なら開いた状態、off なら閉じた状態となります。

ピンクの字の部分は、リスト数を表示させない場合には、false と指定します。
表示させたい場合には、以下のように指定します。

<script type="text/javascript">
<!--
FoldNavigation('comment','on',true,'li');
//-->
</script>

上記は、コメント一覧を、初期状態は開く、リスト表示あり、カウントするタグ名として li を指定しています。
リスト数はこの li タグの数が表示されます。

あとはいつもの保存して再構築です。
変更したテンプレートを再構築して、サイドバーが折りたためることを確認してください。
折りたたみができなかった場合、IDの指定が間違ってないか確認してみてください。

わたしは間違っていたIDを直したら折りたたまれました。
あと FoldNavigation に指定するパラメータに間違いはありませんか!?

以上で、サイドバーの折りたたみができました。
他にもいろんな機能がありますので、小粋空間：：menufolder.js マニュアルに詳細な説明が書かれていますので、参照してください。

Trackback Pings(1)

TrackBack URL for this entry:

from 臨機応変？: 　このサイトも開設してから２年程度がたつため、サイドバーが縦に長くなってきてしま...
Tracked on April 8, 2006

Comments(0)

No comments found.

サイドバーを折りたたむ２

カスタマイズ方法

Trackback Pings(1)

Comments(0)

Post a Comment