と、色々小細工しています。 一般的には カテゴリーは目立つように 表示するのが良いと思いますが、私のテンプレートでは 上のナビゲーション部分にも入っているので．．． このぐらいで丁度良いかな と思っています。
左側 は Paroday さん作の Categories... というプラグインです。この綺麗なアイコンが使ってみたかったので... 作者さんにお願いして アイコンだけ加工して使わせていただくことにしました。 Paroday さんのプラグインについては 過去記事 を参照してください。
現在地表示機能付き カテゴリーリスト の設置方法
このブログで使っているものと 「完全に同じものではありません」 が このままコピー&ペーストすれば大丈夫なようにしてあります。 （※私が実際に使っているものは 非表示カテゴリー対応版 で <!--category_nosub--> ～ <!--/category_nosub--> 部分を外しています。 また、使用している id名 なども 下のソースとは異なる部分がありますので 混在させないようにご注意ください。） 必要な部分だけ取り入れてもらえば 色々と応用できると思います。
単カテゴリーのみ の場合 （親子カテゴリーの必要がない場合） は、
<!--category_parent--> ～ （中略） ～ <!--/category_sub_end--> 部分は不要です。 （※そのまま残しても特に問題はありません。）
1. プラグインの編集 で内容を以下のものと変更
プラグイン → 詳細 → 【HTMLの編集】 で内容を以下のものと変更します。 プラグインは 公式プラグインのカテゴリーでも それ以外でも何でもOKです。
<!-- ==========================================
折りたたみスクリプト 「プラグインの折りたたみ」 本体
Copyright (c) FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/blog-entry-131.html
テンプレート内 又は プラグイン内 に1つだけ記入すればOK！
=========================================== -->
<script type="text/javascript">
// <![CDATA[
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
// ]]>
</script>
<!-- ======================================= -->
<!--not_category_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen1"><a href="#" onclick="showPlagin(1); return false;" title="カテゴリーリストを表示します">▽ List OPEN ▽</a></div>');
document.write('<div id="PlagClose1" style="display:none">');
document.write('<a href="#" title="閉じる" onclick="showPlagin(1); return false;">List CLOSE</a>');
document.close(); // この行追加しました
// ]]>
</script>
<!--/not_category_area-->
<ul id="oyako_cat">
<!--category-->
<!--category_parent-->
<li
class="c_oya<%category_no>"><a href="<%category_link>"
class="cat_oya<%category_no>" title="親カテゴリー: <%category_name> へ"><%category_name> [total <%category_count>]</a>
<ul><!--/category_parent--><!--category_sub_hasnext-->
<li
class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
<!--/category_sub_hasnext--><!--category_sub_end-->
<li
class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
</ul>
</li>
<!--/category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--/category-->
</ul>
<!--not_category_area-->
<script type="text/javascript">
// <![CDATA[
document.write('</div>');
document.close(); // この行追加しました
// ]]>
</script>
<!--/not_category_area-->
これをアレンジして document.write の形にしてあります。 このようにしておけば スクリプトOFF でも問題なく表示できるので、色々な用途に使えます。
2. スタイルシートに 以下を記入
c_close.gif
/* 親子カテゴリー プラグイン用 */
#oyako_cat li ul {
margin:auto auto 14px 0;
line-height:1.4;
}
#oyako_cat li ul li {
list-style:none;
padding-left:19px;
background:url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/c_close.gif) no-repeat left top;
}
* html #oyako_cat li ul li {
background:none;
}
追記 ： 2011/10/03
左の黒丸 と その余白 を無くしたい場合は、以下を（通常は↑の最初に）追加します。
ul#oyako_cat {
margin:auto 0;
list-style:none;
}
3. テンプレートの <head> ～ </head> 部分に 以下を記入
カテゴリー別のページ（<!--category_area-->） でだけ 反映されるスタイル を設定します。 変数 を利用していますので、テンプレートの <head> 部分に入れてください。
c_open.gif
<!--category_area-->
<style type="text/css">
#oyako_cat li.c_oya<%cno> ul li,
#oyako_cat li ul li.cat<%cno> {
background /**/:/**/url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/c_open.gif) no-repeat left top;
}
li.cat<%cno> a,
a.cat_oya<%cno> {
color:#444;
}
</style>
<!--/category_area-->
適当にアレンジして使ってみてください。 変数 って本当に便利！
c_close.gif
c_open.gif
