トップページにカテゴリー毎でリスト表示を分ける方法

今回のインデックスページにてカテゴリー毎でのサブカテゴリーリストの表示は、以下のような感じになると思います。

• メインカテゴリーA
• サブカテゴリA1
• サブカテゴリA2
• サブカテゴリA3
• サブカテゴリA4

• メインカテゴリーB
• サブカテゴリB1
• サブカテゴリB2
• サブカテゴリB3
• サブカテゴリB4

• メインカテゴリーC
• サブカテゴリC1
• サブカテゴリC2
• サブカテゴリC3
• サブカテゴリC4

普通なら無理ですが、CSSを使うことで実現可能です。（正攻法ではないので、構造的にはあまりおススメできません。見た目だけを求めるならこの方法が使えます。）

MTCategoryBasenameをデフォルトのカテゴリーリストのテンプレートタグに追加します。

MTCategoryBasename

カテゴリーのファイル名を表示します。

対応しているバージョン

3.3, Enterprise 1.0

利用方法

<$MTCategoryBasename$>

コード

Widget: カテゴリーリストのデフォルトコードを使って説明します。

<$MTCategoryBasename$>を追加する部分は1箇所でその上のdivクラス指定に任意のプロパティを指定します。

• <li class="module-list-item <$MTCategoryBasename$>">
• <div class="module-content 任意のプロパティ">
• <h2 class="module-header">任意のカテゴリー名</h2>

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header">任意のカテゴリー名</h2>
   <div class="module-content <$MTCategoryBasename$>">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="module-list-item <$MTCategoryBasename$>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
      <MTElse>
      <li class="module-list-item"><MTCategoryLabel>
      </MTElse>
      </MTIfNonZero>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

例えば、上記のコードを使い「カテゴリAのカテゴリーリストを表示する」と仮定します。 div要素のプロパティ指定は、”categoryA”とし、 タイトルを”カテゴリーA”とします。（同じようにカテゴリーB、カテゴリーC）

生成されるコードは以下の通りになります。

<div class="module-categories module">
<h2 class="module-header">任意のカテゴリー名</h2>
<div class="module-content categoryA">
<ul class="module-list">
<li class="module-list-item メインカテゴリAフォルダ名">メインカテゴリーA
	<ul class="module-list">
		<li class="module-list-item サブカテゴリA1フォルダ名">サブカテゴリA1</li>
		<li class="module-list-item サブカテゴリA2フォルダ名">サブカテゴリA2</li>
		<li class="module-list-item サブカテゴリA3フォルダ名">サブカテゴリA3</li>
		<li class="module-list-item サブカテゴリA4フォルダ名">サブカテゴリA4</li>
	</ul>
</li>
<li class="module-list-item メインカテゴリBフォルダ名">メインカテゴリーB
	<ul class="module-list">
		<li class="module-list-item サブカテゴリB1フォルダ名">サブカテゴリB1</li>
		<li class="module-list-item サブカテゴリB2フォルダ名">サブカテゴリB2</li>
		<li class="module-list-item サブカテゴリB3フォルダ名">サブカテゴリB3</li>
		<li class="module-list-item サブカテゴリB4フォルダ名">サブカテゴリB4</li>
	</ul>
</li>
<li class="module-list-item メインカテゴリCフォルダ名">メインカテゴリーC
	<ul class="module-list">
		<li class="module-list-item サブカテゴリC1フォルダ名">サブカテゴリC1</li>
		<li class="module-list-item サブカテゴリC2フォルダ名">サブカテゴリC2</li>
		<li class="module-list-item サブカテゴリC3フォルダ名">サブカテゴリC3</li>
		<li class="module-list-item サブカテゴリC4フォルダ名">サブカテゴリC4</li>
	</ul>
</li>
</ul>
</div>
</div>

上記を見てCSSでメインカテゴリーAのみを表示させるためのコードは、以下の通りになります。

div.categoryA li.メインカテゴリBフォルダ名,
div.categoryA li.メインカテゴリCフォルダ名{
	display:none;
}

このパターンをcategoryBとcategoryCで同じコードでプロパティの要素のみを変えてあげるとカテゴリー毎別のサブカテゴリーリストが生成できます。

コードが複雑になると思うので、この部分だけをモジュール化することで管理が楽になります。

モジュール化

モジュール化については、MTのレイアウトカスタマイズ：ブロックのモジュール化をご覧いただければメリットがわかります。

横並びのリスト表示

階層表示のメニューを横並びにリス表示する場合は、以下のようにするといいと思います。

以下のサイトで簡単に階層リストのメニューをCSSでカッコよく作れます。

List-O-Matic-Generate CSS-styled navigation menus based on list items (using <li> tags) | Developer Tools | Accessify:

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

1. まず、メニューの数を適当に2つほどで選択し、【Yes please - gimme titles】にチェックを付けます。
2. 次にすべてのテキスト入力部分に適当な文字を入力（※全部HOMEでもいいですよ。）
3. メニュー一覧のなかから、好きなデザインを選びます。横並びは下のほうになります。
4. 【How to identify and style the menu】の部分は、class指定を選択（後々のHTMLValidatorに引っ掛からないようにするため）
5. あとは、HTMLコードとCSSが生成されます。それをテンプレートタグに置き換えるだけです。

プロパティが”navcontainer”と”navlist”なので以下のような感じで生成されたCSSコードを組み合わせれば、横並びのCSSメニューが表示されます。

<MTIfArchiveTypeEnabled archive_type="Category"><div class="navcontainer module">
   <h2 class="module-header">カテゴリー</h2>
   <div class="module-content">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="navlist"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="<$MTCategoryBasename$>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
      <MTElse>
      <li class="<$MTCategoryBasename$>"><MTCategoryLabel>
      </MTElse>
      </MTIfNonZero>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

エントリーのあるカテゴリーだけの表示

<MTElse></MTElse>の部分を抜き出せば、エントリーのあるカテゴリーだけの表示になります。

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header">カテゴリー</h2>
   <div class="module-content">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

以上のような方法が考えられます。 他にも方法があれば、コメントいただけると嬉しいです。わからない部分があればコメント下されば、わかる範囲でお答えします。