小粋空間  -  a cheap joke and a play on words site

FC2ブログでサブカテゴリリストをツリー化する

FC2ブログでサブカテゴリリストをツリー化するカスタマイズを紹介します。

１．概要

FC2ブログのカテゴリにはサブカテゴリがサポートされており、カテゴリを親子関係で管理できます（2階層まで）。これに伴い、サイドバーのサブカテゴリリストも次のように階層表示やツリー化による表示が可能です。

変更前

変更後（階層表示）

変更後（ツリー化）

本エントリーでは、階層表示するカスタマイズとツリー化するカスタマイズを紹介します。

２．サブカテゴリの作り方

まず、FC2ブログでサブカテゴリを作る方法です。

ブログ管理画面の「環境設定」にある「カテゴリの編集」をクリック。

カテゴリ一覧が表示されるので、サブカテゴリにしたいカテゴリの「子」列にチェックを入れます。

上の画面の例では、「テンプレート」「カスタマイズ」が「ブログ」カテゴリのサブカテゴリ、「趣味」「食事」が「日記」カテゴリのサブカテゴリになります。

サブカテゴリリストには管理画面に表示されている順番がそのまま再現されます。順番を入れ替えたい場合は、「位置」列や「移動」列を利用してください。

３．サブカテゴリリストを階層表示する

サブカテゴリリストを階層表示にするには、「HTML」にあるサブカテゴリリストを表示するテンプレートを次の内容に入れ替えます。ツリー化する場合も本手順を実施してください。

<div class="sidetitle">
Categories
</div>
 
<div class="side">
<ul>
<!--category-->
<!--category_parent-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a> <ul class="tree">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category_sub_hasnext--> 
<!--category_sub_end-->
<li class="end"><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li></ul></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</div>

カテゴリリストで利用可能なテンプレートタグは次の通りです。

タグ	意味
<!--category--> 　　　　　　： <!--/category-->	カテゴリリストを表示させるブロック
<!--category_parent--> 　　　　　　　　　： <!--/category_parent-->	親カテゴリを表示させるブロック
<!--category_nosub--> 　　　　　　　　　： <!--/category_nosub-->	サブカテゴリを持たないカテゴリで表示するブロック
<!--category_sub_begin--> 　　　　　　　　　　： <!--/category_sub_begin-->	先頭のサブカテゴリで表示するブロック
<!--category_sub_hasnext--> 　　　　　　　　　　　： <!--/category_sub_hasnext-->	最後のサブカテゴリ以外で表示するブロック
<!--category_sub_end--> 　　　　　　　　　： <!--/category_sub_end-->	最後のサブカテゴリのみで表示するブロック
<%category_no>	カテゴリ番号を表示
<%category_link>	カテゴリページのURLを表示
<%category_name>	カテゴリ名を表示
<%category_count>	カテゴリに属する記事数を表示

４．サブカテゴリリストをツリー化する

続いてツリー化のためのカスタマイズを行います。

４．１ ツリー画像のアップロード

まず、ツリー用画像を以下からダウンロードしてください。ファイル名は４．２項のCSSで利用するので、それぞれ「tree_lst.gif」「tree_end.gif」にリネームしておいてください。

• 実線：tree_lst_solid.gif / tree_end_solid.gif
• 点線：tree_lst_dotted.gif / tree_end_dotted.gif

ダウンロードしたツリー用画像を、ブログ管理画面の「ツール」にある「ファイルアップロード」を利用してアップロードします。

アップロードしたファイルのURLは４．２項のCSSで利用します。URLはアップロードしたファイルの一覧に表示されている画像をクリックしてアドレスバーからコピーするか、右クリックで取得してください。

４．２ CSSの設定

CSSに次の内容を設定します。赤色の部分は、４．１項でアップロードした画像のURLを設定してください。

ul.tree {
    margin: 0 0 0 3px;
}
ul.tree li {
    padding: 0 0 0 13px;
    background-image: url(http://.../tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat;
}
ul.tree li.end {
    background-image: url(http://.../tree_end.gif);
}

これでサブカテゴリリストがツリー化表示されれば完成です。