TopMovable Typeカスタマイズ折りたたみサイドメニュー > サイドメニューの折りたたみ(定義リスト編)
2007年10月12日

サイドメニューの折りたたみ(定義リスト編)

Posted at October 12,2007 1:55 AM
Category:[サイドメニュー]
Tag:[, , ]

当サイトで公開している「サイドメニューの折りたたみ」について、配布テンプレート(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 エラーは出ないはずです。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

>yujiroさん

早速、サイドメニューの折りたたみ(定義リスト編)を解説して下さり、ありがとうございます。

自己流で、月別アーカイブだけは折りたためるようになっていたのですが、今回の解説をじっくり読んで、もっと理解を深めたいと思います。

詳しい解説、ありがとうございました。

[1] Posted by avalon : October 13, 2007 1:10 AM

http://kslabo.wonder-mix.com/archives/2007/02/post_362.htmlのサイトのような折りたたみをWordPressでしたいと思います。
お手数ですまた、エントリー宜しくお願いします。

[2] Posted by panser : November 3, 2007 11:41 AM

>panserさん
こんにちは。
ご返事遅くなりすいません。
ご質問の件はご要望事項として承りました。
すいませんがお時間ください。
それではよろしくお願い致します。

[3] Posted by yujiro Author Profile Page : November 6, 2007 6:09 PM
コメントする

*必須



お知らせ:2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!