http://10plate.blog44.fc2.com///blog-entry-217.html

親子カテゴリの折りたたみ

FC2の親子カテゴリ機能の追加により、「親カテゴリ」と「子カテゴリ」の設定が可能になりました。

「親カテゴリ」をクリックすることにより「子カテゴリ」が表示（非表示）される、折りたたみ可能な親子カテゴリを紹介します。

HTMLの<head>～</head>の間に、次の記述を加えてください。外部ファイル化するとコンパクトになります。

<script type="text/javascript">

</script>

次に公式プラグインのフリーエリア等、適当なプラグインのHTMLに以下を加えてください。

<div class="main_menu_fold">


<div class="main_list" &align><a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a></div>


<div class="main_list_parent" &align><a href="#" title="<%category_name>" onclick="showCategory(<%category_no>); return false;"><%category_name>(<%category_count>)</a></div><div id="CategoryNum<%category_no>" style="display: none">


<div class="sub_list" &align><a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a></div>


<div class="sub_list_end" &align><a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a></div></div>


</div>

これは「子カテゴリ」の初期状態を折りたたんで非表示になっている状態です。
「子カテゴリ」の初期状態を展開して表示したい場合はnoneをblockに変えてください。

親カテゴリの記事数を表示したくなければ(<%category_count>)を削除してください。

ツリー化表示したければ、スタイルシートの末尾に以下を加えてください。

/* ▼親子カテゴリ (折りたたみ) ▼ */

.main_menu_fold {
margin-left:10px; /* 全体の左の余白 */
}

/* 親カテゴリ */
div.main_list_parent {
font-weight:normal; /* 文字の太さ (太くしたいならbold) */
margin-bottom:5px; /* 下の余白 */
}

/* 子なしカテゴリ */
div.main_list {
font-weight:normal; /* 文字の太さ (太くしたいならbold) */
margin-bottom:5px; /* 下の余白 */
}

/* 子カテゴリ */
div.sub_list {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif"); /*ツリー画像 */
padding-left:20px;
padding-top:2px;
padding-bottom:2px;
background-repeat: no-repeat;
background-position: left top;
}

/* 子カテゴリ (最後尾) */
div.sub_list_end {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif"); /*ツリー画像(最後尾) */
background-repeat: no-repeat;
background-position: left top;
padding-left:20px;
padding-top:2px;
margin-bottom:10px; /* 下の余白 */
}

/* ▲親子カテゴリ (折りたたみ) ▲ */

これで折りたたみ可能な親子カテゴリが出来ます。

ただしここで紹介した親子カテゴリの「親カテゴリ」のリンクは、「子カテゴリ」の折りたたみスイッチとして使用されるためにカテゴリページへ遷移しません。

親子カテゴリを折りたたみたく、かつ「親カテゴリ」もカテゴリページへ遷移させい場合は、次の共有プラグインがお勧めです。

Lc-Factory＠FC2ブログさんが提供しているLc.ツリーカテゴリー

ぷらぐいん　ごー！ごー！さんが提供している直感カテゴリーツリーＶ２

お好みに合わせて使い分けてください。

関連記事

[ 2009/06/02 04:17 ] カスタマイズ共通カスタマイズ | TB(2) | CM(29)

スポンサーサイト

親子カテゴリの折りたたみ