TopMovable Typeカスタマイズカテゴリー > 2008年4月
2008年4月23日

サブカテゴリーリストを定義型リストでマークアップする

April 23,2008 1:33 AM
Tag:[, , , ]
Permalink

Movable Type の、2階層のサブカテゴリーリストで、定義型リスト(dl/dt/dd:または定義リスト)によるマークアップを実現する方法です。ここでは Movable Type によるカスタマイズを記していますが、定義型リストの使い方の参考にもなると思います。

以前、ご質問を頂いたもので、本エントリーで情報展開しておきます。

1.完成例

親カテゴリーに dt 要素、子カテゴリーは全体を dd 要素で括った後、順不同リスト(ul/li)でリスト表示します。

<dl>
  <dt>親カテゴリーA</dt>
  <dd>
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </dd>
  <dt>親カテゴリーB</dt>
  <dd>
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </dd>
</dl>

ちなみに、上のリストを順不同リストで表現すると、次のようになります。

<ul>
  <li>親カテゴリーA
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </li>
</ul>
<ul>
  <li>親カテゴリーB
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </li>
</ul>

2.サブテンプレート

上記を実現するサブテンプレートは次のようになります。

<dl>
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasNoParentCategory><MTElse><dd><ul></MTHasNoParentCategory></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<MTHasNoParentCategory>
<dt><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]</dt>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
</MTHasNoParentCategory>
<MTElse>
<MTHasNoParentCategory>
<dt><MTCategoryLabel></dt>
<MTElse>
<li><MTCategoryLabel>
</MTHasNoParentCategory>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTHasNoParentCategory>
<MTElse>
</li>
</MTHasNoParentCategory>
<MTSubCatIsLast><MTHasNoParentCategory><MTElse></ul></dd></MTHasNoParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</dl>

余談ですが、定義型リストによるマークアップは、以前行われた「コーディングコンテストVol.1」で最優秀賞を獲得された、「TOTOCO.ORG」さんのマークアップで利用されていて、審査員の方から「dl要素の使い方が良い」と、高い評価を受けています。

コーディングコンテストVol.1最優秀賞☆コーディングコンテストVol.1

下の画面がコンテストで最優秀賞を得たサイトです。ブラウザから[表示]-[ページのソース]でマークアップをみることができます。

最優秀賞☆コーディングコンテストVol.1

例えば、グローバルナビゲーションは次のようなマークアップです(一部省略しています)。

<dl id="globalNav">
  <dt>主なカテゴリー</dt>
  <dd>
    <ul>
      <li><a href="index.html"><img src="nav_home_cr.gif" alt="ホーム" width="98" height="54" /></a></li>
      <li><a href="service/index.html"><img src="nav_biz.gif" alt="事業内容" width="98" height="54" /></a></li>
      <li><a href="products/index.html"><img src="nav_products.gif" alt="製品情報" width="98" height="54" /></a></li>
      <li><a href="recruit/index.html"><img src="nav_recruit.gif" alt="採用情報" width="98" height="54" /></a></li>
      <li><a href="about/index.html"><img src="nav_about.gif" alt="会社概要" width="98" height="54" /></a></li>
      <li><a href="contact/index.html"><img src="nav_contact.gif" alt="お問い合わせ" width="99" height="54" /></a></li>
    </ul>
  </dd>
</dl>

dt 要素は、次のCSSで非表示になっています(セレクタ名は一部省略)。

dl#globalNav dt{
    position:absolute;
    overflow:hidden;
    width:0;
    height:0;
}

丁度この時執筆していた、「Movable Type WEBデザインの新しいルール」のグローバルナビゲーションのカスタマイズにも、この定義型リストによるマークアップを利用させていただきました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3