Top > CMS・ブログ > FC2ブログ > カスタマイズ > ツリー化 > 2011年4月
2011年4月 8日

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

April 8,2011 12:55 AM
Tag:[, ]
Permalink

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

変更後

1.概要

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

変更前
変更前

変更後(階層表示)
階層表示

変更後(ツリー化)
変更後

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

2.サブカテゴリの作り方

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

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

カテゴリの編集

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

カテゴリ一覧

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

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

3.サブカテゴリリストを階層表示する

サブカテゴリリストを階層表示にするには、「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>カテゴリに属する記事数を表示

4.サブカテゴリリストをツリー化する

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

4.1 ツリー画像のアップロード

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

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

ファイルアップロード

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

ファイルの一覧

4.2 CSSの設定

CSSに次の内容を設定します。赤色の部分は、4.1項でアップロードした画像の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);
}

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

Comments [2] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3