FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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)

≪ プラグインの背景を画像にする（standard） | HOME | コメントの投稿者名と日付をコメントタイトルの右に表示する ≫

[ 4568 ] ありがとうございました！

Novelテンプレート管理人はっちでございます。
折りたたみプラグインのスクリプトをご考案くださいまして、本当に、本当にありがとうございました！
気長に待たせていただくと申し上げたものの、それでも、気になって、日参させていただいていたのですが、まさかこんなに早く、公開してくださるとは…!!
驚愕し、恐縮しつつも、大感激です！さっそく、昨日1日かけて、公開中の全ての拙作テンプレートに装着させていただきました。
長いサイドメニューは、オンノベファンがブログ小説を敬遠する原因の一つでありますので、親子カテゴリ折りたたみは本当にありがたいです。しかも、素人には嬉しい、シンプルでスリムなソース！
おかげさまで、悩むことなくすぐにテンプレートに装着することができました。
何から何まで本当にありがとうございました。
まずは御礼とご報告まで
はっち　拝
何もわからない人間にとっては、短くスリムなソース装着もとっても簡単でありました。

[ 2009/06/03 17:15 ] [ 編集 ]

[ 4572 ] > はっちさん

いつも丁寧なコメントを有り難うございます。お役に立てて良かったです。

最近創作意欲が出てきて、オンライン小説にも挑戦したくなってきました＾＾

[ 2009/06/03 22:48 ] [ 編集 ]

[ 4593 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/06/06 15:22 ] [ 編集 ]

[ 4594 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/06/06 15:42 ] [ 編集 ]

[ 4596 ] ありがとうございました！

快諾してくださり、ありがとうございました！
テンプレートへの組み込みについては、自分のスキルがあまりにも低いため目下思案中ですが、カスタマイズ方法として公開させていただきますね。
勿論、記事にはいたおさんのブログを出展元として明記しております。

トラックバックも既にお送りしておりますが、改めて記事のURLをお知らせしておきます。
http://greenbeetle2.blog117.fc2.com/blog-entry-38.html
です。

何か問題があれば、どうぞ遠慮なく仰ってください。
これからもどうかよろしくお願いいたします。

[ 2009/06/06 20:13 ] [ 編集 ]

[ 4599 ] > GreenBeetleさん

トラックバックありがとうございます＾＾
私の記事で役に立ちそうなものがあれば、どうぞ遠慮なくお使いください。

[ 2009/06/06 23:41 ] [ 編集 ]

[ 6090 ]

今更ですがここで質問します＾＾；

先ほどお答えいただいた、子カテゴリフォント等の編集（スタイルシート）の最後尾というのは

/* ▲親子カテゴリ (折りたたみ) ▲ */　←の部分でいいのでしょうか？

こんなことも分からなくてすいません＞＜

[ 2009/09/16 21:48 ] [ 編集 ]

[ 6091 ] > ティーさん

ティーさんの場合はスタイルシートの末尾はそこになりますね。

更にお願いすると、コメントURL欄を記入してもらえると、ティーさんの現状がすぐ確認できて助かります＾＾；

[ 2009/09/16 22:01 ] [ 編集 ]

[ 6092 ]

了解です＾＾；ホントお手数かけさせてしまってすいません

URL欄には記事のURLを貼ればよいのでしょうか･･･？
実際どこのURLを貼ればいいか悩んでました＞＜

[ 2009/09/16 22:56 ] [ 編集 ]

[ 6093 ] ティーさんへ

記事でもTOPでも
どこを貼っても同じです。ｗｗ
スタイルシートはソースを見ますから。

[ 2009/09/16 23:30 ] [ 編集 ]

[ 6094 ] > ティーさん、YASUDAみかんさん

一般的にはトップページのURLですね。

[ 2009/09/17 19:56 ] [ 編集 ]

[ 6095 ]

了解です(ｏ･ω･)ゞ

[ 2009/09/17 21:45 ] [ 編集 ]

[ 6100 ]

前お聞きした、親子カテゴリの折りたたみの
子カテゴリの文字サイズの変更のスタイルシートを貼ってもらったのですが、いまいちうまくできないのです。自分は

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

/* ▲親子カテゴリ (折りたたみ) ▲ */.sub_menu li {
padding-bottom:2px; /* 子カテゴリの間隔 */
font-size:10px; /* 子カテゴリの文字の大きさ */
}

のような形になっていて数値を変えても反映されないのです＞＜
なので今一度教えていただけないでしょうか？

[ 2009/09/18 23:10 ] [ 編集 ]

[ 6102 ] > ティーさん

すみません。こちらをスタイルシートの末尾に追加してみてください。

div.sub_list, div.sub_list_end {
padding-bottom:10px; /* 子カテゴリの間隔 */
font-size:10px; /* 子カテゴリの文字の大きさ */
}

[ 2009/09/19 00:02 ] [ 編集 ]

[ 6107 ]

できました＞＜何度も何度もすいません

本当にありがとうございます。
また何かあればよろしくおねがいします

[ 2009/09/19 10:01 ] [ 編集 ]

[ 6115 ] > ティーさん

解決して良かったです＾＾

[ 2009/09/19 23:15 ] [ 編集 ]

[ 6204 ]

初めまして。【lightframe】使用させていただいてます。

親子カテゴリの折りたたみについて質問です
<head>～</head>というのはドコあたりにあるのでしょうか
こんなことで質問してすいません
もし良ければ回答お願いします

[ 2009/09/25 20:07 ] [ 編集 ]

[ 6206 ] > デコッパさん

HTMLの上三行目あたりに<head>がありますよ。

[ 2009/09/25 20:21 ] [ 編集 ]

[ 6226 ]

ありがとうございます＞＜

[ 2009/09/26 08:00 ] [ 編集 ]

[ 6934 ] ありがとうございます！！

いたおさん、はじめまして。

私は昨年FC2に入会したブログ初心者ですが、カスタマイズを楽しく感じており、ネット検索していてこちらのブログにたどり着いて以来、いろいろととても参考にさせていただいています。

親子カテゴリを折りたたむスクリプトは、こんなのがあればなぁと探していたので凄く嬉しいです！早速自分のブログにも取り込んで活用しております＾＾

ところで、一度ユーザーが開閉した状態を保持するバージョンはございませんでしょうか？cookieを使うんだろうなぁと予測しているんですが自分では作れず･･･

お忙しいとは思いますのでお手すきのときにでもご検討いただけましたら幸いです。

ではでは、また遊びにきます＾＾

[ 2009/11/12 14:14 ] [ 編集 ]

[ 6941 ] > まっきぃさん

私は試した事がないのですが、小粋空間さんが状態保持可能な折り畳みスクリプトを公開しています。

小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）
http://www.koikikukan.com/archives/2004/12/06-020033.php

[ 2009/11/12 21:44 ] [ 編集 ]

[ 7101 ] JS無効時について

　お久しぶりです。以前、このスクリプトをカスタマイズ記事に使わせていただいた、GreenBeetleと申します。
　スクリプトについて少しお知恵を拝借したくて、まいりました。

　JavaScript が無効の場合に子カテゴリを表示させておきたくて、現在色々と試行錯誤中なのです。一から別なスクリプトを作りあげるには私は圧倒的に知識が足りないし、他のスクリプトを探してもみましたが、スタイルで非表示を切り替えるこの方法が一番解り易かったし、何よりいたおさまのスクリプトがとてもシンプルでスマートだと思うので、なんとかこのスクリプトを使って、子カテゴリの折りたたみ＆JS無効時の子カテゴリ表示が実現できないかと考えているところです。

　それで、以下の三つの案を考えてみたのですが、スクリプトを作られた立場として、どれが一番許容出来るものか、教えていただけないでしょうか。

１）折りたたみ部分を含むカテゴリ一覧を、丸々 document.write で書き出し、折りたたまないカテゴリ一覧を noscript で囲む。
　→HTML lint で、「script タグの中に div タグは書けません」とエラーになってしまう。

２）子カテゴリブロックの初期設定を display:block にしておいて、子カテゴリブロックと同時に小さな画像を読み込ませて、そのタグに onload でこのスクリプトを動作させ折りたたむ。
　→HTMLの仕様書によると、onload は img に使えない。（IE、FF、Operaではきちんと動作していたし、lintでエラーは出ませんでしたが……）

３）子カテゴリブロックの初期設定を display:block にしておいて、子カテゴリブロックと同時に window.onload でこのスクリプトを動作させ折りたたむ。
　→１ページに複数の window.onload が存在しても問題ないのかが不明……。（IE、FF、Operaではきちんと動作していましたが……）

　いかんせん、JavaScriptについての知識がないため、細かいニュアンスが全然全く解りません。こんな使い方はして欲しくない、とか、そういう根本的な事すら察する事が出来ない素人なので、どうか時間のある時で構いませんので、一言お言葉添えをお願いいたします。

[ 2009/11/22 11:41 ] [ 編集 ]

[ 7114 ] > GreenBeetleさん

お久しぶりです、GreenBeetleさん

私もそれほどJavascriptに詳しくはありませんが、(1)のnoscriptを使った方法が良さそうだと思いました。私はあまりlintチェックを気にしないほうなので＾＾；

[ 2009/11/23 13:28 ] [ 編集 ]

[ 7129 ] ありがとうございました！

早速のお返事をありがとうございます！

JavaScriptについて良く解らないから、という理由もありましたが、何より、スクリプト本体に手を加えていないとはいえ人様の作ったツールをここまで好き勝手に使用しても良いものか、その点を是が非でもお聞きしなければ、と、長々とコメント欄をお借りした次第です。
お忙しいところ、お手数をおかけいたしました。心から感謝いたします。
それでは、noscript の方法を使わせていただきます。了解いたしました。

それで、この親子カテゴリの折りたたみスクリプトについて以前いただいた「共有テンプレートの中に組み込んでも構わない」とのお言葉に甘えて、上記(1)の「document.write ＆ noscript」で、順次当方の小説用テンプレートに搭載したいと思うのですが、構わないでしょうか。
その際には、該当するテンプレートの解説記事に、スクリプトの製作者としていたおさんのお名前と、このエントリへのリンクを追加したいと思っています。
もしも何か不都合がありましたら、どうか遠慮なくお申し付けください。

色々お世話になってしまって、本当にすみませんでした。そして、ありがとうございました！

[ 2009/11/23 18:14 ] [ 編集 ]

[ 7143 ] > GreenBeetleさん

どうぞ遠慮なく組み込んでください＾＾

[ 2009/11/24 23:47 ] [ 編集 ]

[ 7157 ] ありがとうございます！

それでは、共有テンプレートに使わせていただきますね。
お手数をおかけいたしました、ありがとうございました。

[ 2009/11/25 06:32 ] [ 編集 ]

[ 7166 ] > GreenBeetleさん

記事に紹介してくれてありがとうございます＾＾

[ 2009/11/25 22:12 ] [ 編集 ]

[ 8812 ] 承認待ちコメント

このコメントは管理者の承認待ちです