Movable Type 備忘録
サイドバーを折りたたむ2
- Next Page: テクノラティにタグ情報を送信する
- Prev Page: MovableTypeでモブログやってみよ2
以前、サイドバーを折りたたむで、サイドバーにあるカテゴリ一覧とか、コメント一覧、トラックバック一覧などを折りたたむ、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)
- from
臨機応変?
このサイトも開設してから2年程度がたつため、サイドバーが縦に長くなってきてしま...
Comments(0)
No comments found.


Post a Comment