はてなブログなのにFC2ブログのやり方を載せている事に違和感があると思いますが、昔使ってたFC2ブログで記事を移行したためこのような形に（笑）
という事で、今回は「FC2ブログで」カテゴリの折りたたみをする方法をご紹介します。
※※注意※※
スタイルシートやCSSに変更を加える際は、必ずバックアップを取ってから行うようにして下さい！！
FC2ブログでカテゴリを折りたたむ方法
「カテゴリ」プラグインの追加
初めにカテゴリのプラグイン追加から行なっていきます。既に追加している方は読み飛ばして下さい。
まず、カテゴリFC2の管理画面から、
「環境設定」→「プラグインの設定」→PC用「公式プラグイン追加」→「カテゴリ」
を追加してください。（カスタマイズ向けでなくてもOK。）
プラグインを追加したら、親となるカテゴリと子となるカテゴリを作っておきましょう。
例えば、「ゲーム」というカテゴリの中の１つとして「ポケモン」や「マリオ」のカテゴリを表示させたい場合、「ゲーム」「ポケモン」「マリオ」の３つのカテゴリを作成します。
しかし、このままだとカテゴリの親子関係が設定されていないので、「ポケモンとマリオはゲームカテゴリの中の１つである」と設定してやる必要があります。
親子関係の設定（ツリー化）
次に、作成したカテゴリについて親子関係を設定していきます。
先ほどの例で言うと、「ゲーム」を親カテゴリ、「ポケモン」と「マリオ」を子カテゴリとして設定してやる必要があります。
管理画面から、「環境設定」→「カテゴリの編集」で、カテゴリ一覧の表に「子」というチェックボックスがあるかと思います。
チェックを入れると、そのカテゴリが一つ上のカテゴリの「子」として認識されるので、子カテゴリにしたいカテゴリを親カテゴリの下に持っていき、チェックを全て付ければ良いのです。
上記の例で言うと、「ポケモン」と「マリオ」のカテゴリの順番を「ゲーム」の下になるよう並び替えます。（並べ替えのやり方は一覧表の上に書いてあります。）
後は、子にしたいカテゴリ（例ではポケモンとマリオのカテゴリ）の「子」チェックボックスにチェックを入れ、表の下にある「修正」ボタンを押せばOKです。（この時点でちゃんとツリー化できているか確認しておきましょう。）
詳しい導入方法はこちらに載ってます↓
FC2インフォメーション 【ブログ】親子カテゴリ機能追加のお知らせ
以上の操作で、親子関係の設定（ツリー化）が完了しました。
この時点では、まだカテゴリを折りたたむことはできないため、次は折りたたみの設定を行なっていきます。
カテゴリの折りたたみ設定
カテゴリを折りたたむ方法については、こちらのページを見ながらやっていきます↓
親子カテゴリの折りたたみ - FC2ブログのテンプレート工房
「環境設定」→「プラグインの設定」→「カテゴリ」→「詳細」→「プラグインの改造」→「HTMLの編集」をクリックしてください。すると、下にテキストボックスが開かれると思います。
中に書いてあるものを全部消して、代わりに先ほどのページの「HTMLの<head>～</head>の間に～」という記述の下のグレーのボックスに書かれているコードをコピペして貼り付けて下さい。
ここで、<script type="text/javascript">～</script>の部分を<head>～</head>で囲ってください。
【例】
<head>
<script type="text/javascript">
～
</script>
</head>
次に、先ほどのページの「次に公式プラグインの～」という記述の下のグレーボックスの中のコードをコピペして貼り付けます。
【例】
<head>
<script type="text/javascript">
～
</script>
</head>
<div class="main_menu_fold">
～
</div>
上の例のように貼り付けられたら、テキストボックスの下の「設定」ボタンを押せばOKです。
最後に、「環境設定」→「テンプレートの設定」→「現在自分が使っているテンプレート（旗のマークがついているもの）」→「編集」をクリックし、下にあるスタイルシートのテキストボックスの中のコードの一番下に、先ほどのページの「これは「子カテゴリ」の初期状態を～」の下にあるグレーボックスの中のコードをコピペします。
貼り付けられたら、スタイルシートのテキストボックスの下にある「更新」ボタンを押してください。
これでカテゴリがツリー化され、折りたたまれていると思います。
表示方法を自由にカスタマイズ！
「ここはこういうことが書いてある」というのが分かれば、自由にカスタマイズできる！という事でコードの見方を書いていこうと思います。
先ほどのページの2つ目のグレーボックスを見てください。
<!--category_nosub-->
～
<!--/category_nosub-->
という部分がありますが、この部分は「子を持たないカテゴリ」の設定が書いてあります。
その中の、</a>の前の部分に
<%category_name>(<%category_count>)
とありますが、これは「カテゴリ名」と「（カテゴリの記事数）」を表しています。
つまり、カテゴリを表示するとき、「カテゴリ名（記事数）」と表示してくださいと書いてあるわけです。
この部分を変えてやることで、カテゴリの表示の仕方をカスタマイズすることができます。
例えば、「子を持たないカテゴリ」の表示を「★カテゴリ名［記事数］」としたい場合は、
<!--category_nosub-->
～
<%category_name>(<%category_count>) ←ここを書き換える
〜
<!--/category_nosub-->
の部分を「★<%category_name>［<%category_count>］」と書き換えてやれば良いのです。
他のカテゴリについても同じで、
<!--category_parent-->
～
<!--/category_parent-->は「子を持つ親カテゴリ」の設定、
<!--category_sub_hasnext-->
～
<!--/category_sub_hasnext-->は「子カテゴリ」の設定、
<!--category_sub_end-->
～
<!--/category_sub_end-->は「最後尾の子カテゴリ」の設定が書かれています。
表示の仕方を変えたい時は、それぞれの中にある、<%category_name>(<%category_count>)の部分を変えてやればいいのです。
次に、先ほどのページの３つ目のグレーボックスを見てください。
これはもはや説明の必要が無いくらい丁寧に書かれているので、特に言うことはないのですが、もし、ツリーの表示に文字などを使いたい場合は、「background-image: url(～);」の部分を消してください。
例えば、ツリー表示に「┣」などを使いたい場合、上記の部分を消して「子カテゴリ」の部分の
「<%category_name>(<%category_count>)」を
「┣ <%category_name>(<%category_count>)」と書き換えています。
以上でカスタマイズ方法の説明は終わりです。
みなさんも自分の好きなようにブログをカスタマイズして、楽しんで下さい！
