CSS設定でサブカテゴリーだけを表示する方法/MT条件分岐：MTHasNoSubCategories

サブカテゴリーページにて同じ階層カテゴリーのメニュー表示

MTでの条件分岐テンプレートタグの<MTHasNoSubCategories>を使います。

MTHasNoSubCategories

現在のカテゴリーにサブカテゴリーが存在しないときだけ実行する条件タグです。

対応しているバージョン

3.1, 3.2, 3.3, Enterprise 1.0

利用方法

<MTHasNoSubCategories> 〜 </MTHasNoSubCategories>

サブカテゴリーの表示設定をCSSにて処理します。<$MTCategoryBasename$>を使います。

関連エントリー：<$MTCategoryBasename$>

MTでカテゴリ毎にページの表示を変える方法：<$MTCategoryBasename$>

<$MTCategoryBasename$>を使ってCSSメニュー切り替え表示（２）

表示コード・説明

下記のコードが当ブログで使っているテンプレートコードです。

<MTHasNoSubCategories>
<div class="任意のプロパティ <$MTCategoryBasename$>">
	<h5><MTParentCategory><MTCategoryLabel></MTParentCategory>カテゴリリスト</h5>
	<MTSubCategories>
		<MTSubCatIsFirst><ul></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>
	</MTSubCategories>
</div>
</MTHasNoSubCategories>

まず、<MTHasNoSubCategories></MTHasNoSubCategories>は、メインカテゴリ時には表示されません。サブカテゴリーもしくは下の階層にカテゴリーが存在しない時に囲まれたコードが生成・表示されるようになります。（MT条件分岐）

<MTParentCategory><MTCategoryLabel></MTParentCategory>の設定で親カテゴリー名が表示されるようになります。

<MTSubCategories></MTSubCategories>ですべてのカテゴリーメニューを階層表示関係なく表示します。

一番最初のdiv要素と階層表示のli要素にクラス指定で<$MTCategoryBasename$>を設定します。これは、CSSで他のカテゴリーの表示を消すためです。また、表示のカラー変更なども兼ねて設定できます。

例えば、上記のコードで生成されるHTMLコードは、以下の通りになります。
（※MT（メインカテゴリー）＞カスタマイズ（サブカテゴリー）で生成されるコードとします。）

• MTカテゴリーのフォルダ名は、"mt"
• カスタマイズカテゴリーのフォルダ名は"custom"

<div class="custom"><h5>MTカテゴリリスト</h5>
<ul>
	<li class="firefox"><a href="http://weblibrary.s224.xrea.com/weblog/firefox/" title="  "> Firefox </a>
		<ul><li class="cat14"><a href="http://weblibrary.s224.xrea.com/weblog/firefox/cat14/" title=" "> エクステンション </a></li></ul></li>
<li class="mt"><a href="http://weblibrary.s224.xrea.com/weblog/mt/" title=" "> MT </a>
		<ul><li class="mtblog"><a href="http://weblibrary.s224.xrea.com/weblog/mt/mtblog/" title=" "> blog,ブログ </a></li>
			<li class="custom"><a href="http://weblibrary.s224.xrea.com/weblog/mt/custom/" title=" "> カスタマイズ </a></li>
			<li class="templatetag"><a href="http://weblibrary.s224.xrea.com/weblog/mt/templatetag/" title=" "> タグ,プラグイン </a></li>
			<li class="template"><a href="http://weblibrary.s224.xrea.com/weblog/mt/template/" title=" "> テンプレート </a></li>
			<li class="news"><a href="http://weblibrary.s224.xrea.com/weblog/mt/news/" title=" "> ニュース,トピック </a></li>
			<li class="setting"><a href="http://weblibrary.s224.xrea.com/weblog/mt/setting/" title=" "> 設置,Xrea </a></li></ul></li>
<li class="webdesign"><a href="http://weblibrary.s224.xrea.com/weblog/webdesign/" title="  "> WEB,デザイン </a>
		<ul><li class="seo"><a href="http://weblibrary.s224.xrea.com/weblog/webdesign/seo/" title="ユーザービリティーを考えたSEOについて紹介"> SEO </a></li></ul></li>
<li class="web20"><a href="http://weblibrary.s224.xrea.com/weblog/web20/" title=" "> WEB2.0 </a>
	 	<ul><li class="blog"><a href="http://weblibrary.s224.xrea.com/weblog/web20/blog/" title=" "> blog,ブログ </a></li></ul></li>
<li class="css"><a href="http://weblibrary.s224.xrea.com/weblog/css/" title=" "> css,スタイルシート </a>
		<ul><li class="cat15"><a href="http://weblibrary.s224.xrea.com/weblog/css/cat15/" title=" "> テンプレート </a></li></ul></li>
<li class="diary"><a href="http://weblibrary.s224.xrea.com/weblog/diary/" title=" "> ダイアリー </a></li></ul>
</div>

実際には、すべてのメニューが生成されています。これでは、普通のカテゴリーリストとなんら変わりはありません。同じ階層のカテゴリーのみを表示したい場合には、面倒ですが個別にCSSの設定で表示を消します。

上記の参考メニューの場合は、以下のようなパターンのCSSの設定で他のカテゴリー部分が表示されなくなります。

.custom li.firefox,
.custom li.css,
.custom li.webdesign,
.custom li.diary,
.custom li.web20{
display:none;
}

表示コード：CSSパターン

.サブカテゴリファイル名 li.メインカテゴリーファイル名,
.サブカテゴリファイル名 li.メインカテゴリーファイル名,



.サブカテゴリファイル名 li.メインカテゴリーファイル名{
display:none;
}

クラス指定でないとXHTMLValidation Serviceにて引っ掛かります。

上記のようにすべてのサブカテゴリーでの設定をする必要があります。サブカテゴリー×メインカテゴリーの数分のCSSの設定が必要です。条件分岐を使って独自のコードを読み込ませるといった手法もかんがえられますが、あとあとのメンテナンスを考えて管理が難しそうなのでこの方法を使いました。

注意：この方法はCSSが無効である場合はすべてのメニューが表示されてしまいます。

javascriptを使えば、実行可能だと思います。ただ、いじくれないので・・・・・

サブカテゴリーのみを表示する方法をいろいろと探しましたが、静的ページでサブカテゴリーのみの表示はみつかりませんでした。動的ページでは可能のようなエントリーを見かけましたが、当サイトのコンテンツとアクセス数で動的ページにするメリットがまだないので、しばらくSEOを考えての静的ページでのカスタマイズを考えていいこうと思っています。

また何か他にいい方法があれば、コメント下さると助かります。