MTでカテゴリー、サブカテゴリーを表示するパンくずリストの作り方

MTでカテゴリー、サブカテゴリーを表示するパンくずリストの作り方

サブカテゴリーがある場合は、メインカテゴリーにリンクあり。サブカテゴリーがない場合は、メインカテゴリーにリンクなし。のパンくずリストを作るのが少しややこしいと思ったので紹介しておこうと思います。

…ここからが続き

ブログ記事リストに追加する

<ul class="pankuzu">
	<li><a href="/">TOP</a></li>
<MTHasNoParentCategory>
	<li>> <$MTCategoryLabel$></li>
</MTHasNoParentCategory>
<MTHasParentCategory>
	<MTTopLevelParent>
		<li>> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
	</MTTopLevelParent>
		<li>> <$MTCategoryLabel$></li>
</MTHasParentCategory>
</ul>

ブログ記事に追加する

<ul class="pankuzu">
	<li><a href="/">TOP</a></li>
<MTParentCategories>
	<MTIfNonZero tag="MTCategoryCount">
		<li>> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
		<MTElse><li><$MTCategoryLabel$></li></MTElse>
	</MTIfNonZero>
</MTParentCategories>
	<li>> <$MTEntryTitle$></li>
</ul>

日付アーカイブに追加する

ここは簡単なんですが、メモついでに書いておく事にします。

<ul class="pankuzu">
	<li><a href="/">TOP</a></li>
	<li>> <$MTArchiveTitle$></li>
</ul>

CSS

ついでに上記ソースをそのままコピペするなら下記ソースをCSSに記述して貰えればそのまま使えますよ。
(テキストの色やリンクの色は好きにつけて下さいね)

.pankuzu	{
	width: 100%;
}
.pankuzu li	{
	display: inline;
	margin-right: 5px;
}

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article