サイドメニューの折りたたみ(定義リスト編)
当サイトで公開している「サイドメニューの折りたたみ」について、配布テンプレート(XHTML 1.0 Strict 版)のサイドバーに定義リスト(dl/dt/dd)を使用している場合のカスタマイズについてご質問を頂きましたので、本エントリーにて説明致します。
div 要素の場合の設定例
これまでの、div を使用した場合の設定(青色部分を追加)は下記の通りです。
<div class="sidetitle" id="categoryname">
Categories
</div>
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
MT4(またはMT3.x XHTML1.0 Strict 版)の設定例
カテゴリーリスト
ここではカテゴリーリストを例に挙げてますが、どのリストについても、script 要素を dd 要素で括ってください。これを行わないと valid な XHTML になりません。
また、script 要素はリストに示す通り、MTIfArchiveTypeEnabled の内側に設定してください。外側でも問題ありませんが、内側の方がより妥当です。
<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle" id="categoryname">
Categories
</dt>
<dd class="side" id="categorylist">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
アーカイブリスト
デフォルトテンプレートのサイドバーにあるアーカイブリストの構造(+定義リスト)を適用している場合、script 要素を dd 要素で括ることに加え、各アーカイブリスト(月別アーカイブリスト・月別カテゴリアーカイブリスト・ユーザーアーカイブリスト・月別ユーザーアーカイブリスト)の id 属性はすべて同じものを使用して構いません。これは各アーカイブ(またはメインページ)で表示されるリストがいずれかひとつであるためです。
<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="archivename">
Monthly Archives
</dt>
<dd class="side" id="archivelist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle" id="archivename"><$MTArchiveTitle$>: Monthly Archives</dt>
<dd class="side" id="archivelist">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader>
<ul>
</MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_author-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Author-Monthly">
<dt class="sidetitle" id="archivename"><$MTAuthorDisplayName$>: Monthly Archives</dt>
<dd class="side" id="archivelist">
<MTArchiveList archive_type="Author-Monthly">
<MTArchiveListHeader>
<ul>
</MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
<MTIf name="module_author_archives">
<MTIfArchiveTypeEnabled archive_type="Author">
<dt class="sidetitle" id="archivename">Author Archives</dt>
<dd class="side" id="archivelist">
<MTArchiveList archive_type="Author">
<MTArchiveListHeader>
<ul>
</MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
上記の例では script 要素がやや冗長なので、リストの一番最後(MTIf の外側)にひとつだけ設置しても良いでしょう。
その場合、何らかのページでアーカイブリストがひとつも表示されなくても、JavaScript エラーは出ないはずです。
- ListfolderプラグインをMovable Typeに適用する
- サイドメニューの折りたたみ(Movable Type 4.x デフォルトテンプレート用)
- サイドメニューの一部を折りたたむ
- サイドメニューの折りたたみマークに画像を使用する
- サイドメニューの折りたたみ(Movable Type デフォルトテンプレート用)
- サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)
- サイドメニューの折りたたみに画像を使用する
- サイドメニューの折りたたみ(v4.0)
- menufolder.js 3.01 リリース
- Movable Type ユーザー・マニュアルをサイドメニューに追加
- サブカテゴリーリストの折りたたみ
- サイドメニュー折りたたみスクリプト(cookie等改善版)
- サイドメニューの折りたたみスクリプト改修中
- サイドメニュー折りたたみの動作遅延対処
- サイドメニュー折りたたみ状態保持スクリプト
>yujiroさん
早速、サイドメニューの折りたたみ(定義リスト編)を解説して下さり、ありがとうございます。
自己流で、月別アーカイブだけは折りたためるようになっていたのですが、今回の解説をじっくり読んで、もっと理解を深めたいと思います。
詳しい解説、ありがとうございました。
http://kslabo.wonder-mix.com/archives/2007/02/post_362.htmlのサイトのような折りたたみをWordPressでしたいと思います。
お手数ですまた、エントリー宜しくお願いします。
>panserさん
こんにちは。
ご返事遅くなりすいません。
ご質問の件はご要望事項として承りました。
すいませんがお時間ください。
それではよろしくお願い致します。
いつもお世話になっております。
今までは「Link」のみ折りたたみをしておりましたが、最近全てを折りたたみできるようにしました。その際に今まで出なかったタイトルの前に数字が出るようになったのですが(ex: 「5 最近の記事」)、この数字を消す方法はないのでしょうか?
「Link」と同じような記述を試みましたが、NGでした。
よろしくお願いします。
>眞さん
こんにちは。
ご質問の件ですが、折りたたみスクリプトを起動する
FoldNavigation('xxxxx','on',true);
の true を、次のように false に変更してください。
FoldNavigation('xxxxx','on',false);
それではよろしくお願い致します。
yujiroさん、早速どうもありがとうございます。
無事修正できました。
なぜかと思ったら、↓に書かれていた内容でしたか?
http://www.koikikukan.com/menufolder.php
良く読まずに毎度すみません。
これからもよろしくお願いします。