記事のカテゴリを更に細かく分けたい時に、カテゴリの親子関係を持たせることができます。

作成できるカテゴリの階層は「親」と「子」の2階層までです。

レシピブログを書いていた場合を例にしてご説明いたします。
従来ですと一つのカテゴリに複数の内容が含まれていて、肉を使った料理や野菜を使った料理など、細かく分けるのにはタグをつけたり、カテゴリを分ける必要がありました。

■従来のカテゴリ
  • 和食レシピ(3)
  • 洋風レシピ(3)
  • イタリアンレシピ(3)
しかし、カテゴリ階層化を使うことで、カテゴリを更に細かく分けることができるようになります。

■カテゴリ階層化を使うと
  • 和食(4) (投稿日で新しいものが先 / 降順)：親カテゴリ
    • 肉を使った料理(1) (投稿日で新しいものが先 / 降順)：子カテゴリ
    • 魚を使った料理(1) (投稿日で新しいものが先 / 降順)：子カテゴリ
    • 野菜を使った料理(2) (投稿日で古いものが先 / 昇順)：子カテゴリ 
  • 洋食(3) (投稿日で新しいものが先 / 降順)：親カテゴリ
    • 肉を使った料理(1) (投稿日で新しいものが先 / 降順)：子カテゴリ
    • 魚を使った料理(1) (投稿日で新しいものが先 / 降順)：子カテゴリ
    • 野菜を使った料理(1) (投稿日で新しいものが先 / 降順)：子カテゴリ 

上記例の場合、親である『和食』のリンクを押した場合は和食以下のカテゴリのすべての記事が降順に表示され、『和食カテゴリ以下の野菜を使った料理』のリンクを押した場合は和食カテゴリ以下の野菜を使った料理の記事だけが昇順に表示されます。

カテゴリの親子関係の作り方

  1. ブログ設定 > カテゴリ管理 を開きます
  2. 親にしたいカテゴリ 『和食』 を新しく追加します
  3. 子にしたいカテゴリの編集を押して親カテゴリを指定します。この場合は『和食』を指定。

    カテゴリ階層化01

    もしくは、マウス操作のドラッグ&ドロップで子カテゴリにすることができます
    カテゴリ階層化02

親子関係をブログパーツで表示させるには

カテゴリ別アーカイブブログパーツイメージ

このように子カテゴリのみを右に寄せたい場合は以下のCSSを追加します。
■例 ※{}内の表記はテンプレートによって異なります。 
.sidewrapper .side .sidebody.category-child {
	margin-left: 12px;
}

カテゴリ親子関係用の独自タグ

カテゴリアーカイブページのタイトルに親子カテゴリ名を表示する例

カテゴリタイトル
<h1><IfHasParentCategory>
<a href="<$ParentCategoryUrl$>"><$ParentCategoryName ESCAPE$></a> >
</IfHasParentCategory>
<a href="<$CategoryUrl$>"><$CategoryName ESCAPE$></a></h1>

※カテゴリアーカイブページ以外では使用できません。

記事のカテゴリ表示部分に親子カテゴリ名を表示する

記事カテゴリ部分
		<IfArticleCategory1>
		<li class="article-category">
			<dl><dt>カテゴリ:</dt><dd class="article-category1">
<a href="<$ParentCategoryUrl$>"><$ParentCategoryName ESCAPE$></a> > <a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></dd><IfArticleCategory2><dd class="article-category2"><a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></dd></IfArticleCategory2></dl>
		</li>
		</IfArticleCategory1>
↓上記の内容を以下のように変えます。 
		<li class="article-category">
			<dl><dt>カテゴリ:</dt>
			<dd class="article-category1">
			<IfArticleCategory1>
				<IfParentCategory1><a href="<$ParentCategory1Url$>"><$ParentCategory1Name ESCAPE$></a></IfParentCategory1> > <a href="<$ArticleCategory1Url$>"><$ArticleCategory1 ESCAPE$></a>
			</IfArticleCategory1>
			</dd>
			<IfArticleCategory2>
			<dd class="article-category2">
				<IfParentCategory2><a href="<$ParentCategory2Url$>"><$ParentCategory2Name ESCAPE$></a></IfParentCategory2> > <a href="<$ArticleCategory2Url$>"><$ArticleCategory2 ESCAPE$></a>
			</dd>
			</IfArticleCategory2>
			</dl>
		</li>
独自タグ 説明 備考
<IfHasParentCategory></IfHasParentCategory> 親カテゴリが設定されているかどうかの判別用の独自タグ <$ParentCategoryUrl$>の独自タグはこの条件式の中で使う
<IfParentCategory1></IfParentCategory1> カテゴリ1が設定されているかどうかの判別用の独自タグ <$ParentCategory1Url$><$ParentCategory1Name$>の独自タグはこの条件式の中で使う
<IfParentCategory2></IfParentCategory2> カテゴリ2が設定されているかどうかの判別用の独自タグ <$ParentCategory2Url$><$ParentCategory2Name$>の独自タグはこの条件式の中で使う
<$ParentCategoryUrl$> 親カテゴリのURL を表示する独自タグ
<$ParentCategoryUrl1 ESCAPE$> カテゴリ1のURL を表示させる独自タグ
<$ParentCategoryUrl2 ESCAPE$> カテゴリ2のURL を表示させる独自タグ
<$ParentCategoryName ESCAPE$> 親カテゴリ名の名称 を表示させる独自タグ
<$ParentCategoryName1 ESCAPE$> カテゴリ1の名称 を表示させる独自タグ
<$ParentCategoryName2 ESCAPE$> カテゴリ2の名称 を表示させる独自タグ

※カスタマイズについてはサポート対象外になりますので、各自の責任の元ご利用ください。

開発日誌 : 記事カテゴリに親子関係をつくれるようになりました