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

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

公式カテゴリ(カスタマイズ向け)のツリー化

公式プラグインの「カテゴリ」は親子関係でグループ分けすることが可能です。
(以前はこのような機能は無く、有志が提供する共有プラグインに頼らざるを得ませんでした。)

設定方法はこちらにあります。
【ブログ】親子カテゴリ機能追加のお知らせ

公式プラグインの「カテゴリ」には、カスタマイズ向けのものと、そうでないものがあります。

カスタマイズ向けのものはそのままだとリストマークで表示されていますが、これをツリー化表示する方法を紹介します。

スタイルシートの末尾に次の記述を加えてください。

/* ▼親子カテゴリ▼ */

li.main_list {
margin-bottom:8px; /* 親カテゴリの間隔 */
font-weight:bold; /* 親カテゴリの文字の太さ */
}

ul.sub_menu {
margin:0px;
padding:0px;
margin-top:5px; /* 親カテゴリから子カテゴリまでの間隔 */
padding-left:0px; /* 子カテゴリの左余白 */
}

.sub_menu li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0px;
padding-left:20px;
padding-top:2px;
padding-bottom:5px; /* 子カテゴリの間隔 */
font-weight:normal; /* 子カテゴリの文字の太さ */
}

.sub_list {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif"); /*ツリー画像 */
}

.sub_list_end {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif"); /*ツリー画像(最後尾) */
}
/* ▲親子カテゴリ▲ */



各数値はお好みに合わせて変更してください。
関連記事
[ 3800 ]
参考になりました^^
[ 2009/03/31 11:08 ] [ 編集 ]
[ 3801 ]
追記なんですけども
太さの単位って何ですか?
[ 2009/03/31 11:13 ] [ 編集 ]
[ 3802 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/03/31 12:53 ] [ 編集 ]
[ 3803 ] ▼ffkam28さん
normal…通常
bold…太字
bolder…より太く
lighter…より細く

下2つは変化しないことのほうが多かったりするので、上2つのどちらかの指定で大丈夫です。
[ 2009/03/31 13:32 ] [ 編集 ]
[ 3806 ] > ちゃんさん、fkam28さん
ちゃんさん、いつもありがとうございます^^

fkam28さん、ちゃんさんの説明の通り、太さは通常(normal)か太字(bold)を選ぶのが無難だと思います。
[ 2009/03/31 21:51 ] [ 編集 ]
[ 4783 ]
念願のツリー化完成です。
有難うございました。
[ 2009/07/03 14:42 ] [ 編集 ]
[ 4785 ] > 豪州サンディさん
FC2の機能拡張は良い事ばかりでもないのですが、この親子カテゴリ機能はとても便利かも知れませんね^^
[ 2009/07/03 18:11 ] [ 編集 ]
[ 5809 ]
とても参考になります!

カスタマイズ向けの方でツリー化すると
親と子の両方にリストマークが付きますけど、
子の方のリストマークを削除したい場合は
どうしたら良いでしょうか?


宜しくお願いします。
[ 2009/09/03 22:47 ] [ 編集 ]
[ 5810 ] > ゆうきさん
スタイルシートの末尾に加えてください。

.sub_menu li {
list-style-type:none;
}
[ 2009/09/03 22:57 ] [ 編集 ]
[ 5811 ]
末尾に加えましたが、マークが消えませんでした。


/* ▲親子カテゴリ▲ */

の下に追加すれば良いのでしょうか?

[ 2009/09/03 23:13 ] [ 編集 ]
[ 5812 ] > ゆうきさん
/* ▲親子カテゴリ▲ */ があるということはツリー化のカスタマイズをしているのでしょうか。それならツリー画像が表示されてリストマーク「・」は表示されないと思うのですが・・
現状確認のためにURLを教えてください。
[ 2009/09/03 23:42 ] [ 編集 ]
[ 5818 ]
ご回答ありがとうございます。

http://lovepoket.blog72.fc2.com/
です。
[ 2009/09/04 13:02 ] [ 編集 ]
[ 5827 ] > ゆうきさん
なるほど、お使いのテンプレートではそのような設定がされていましたか。それではスタイルシートの末尾に以下を加えてくてみてください。

.sub_menu li {
list-style: none;
}
[ 2009/09/04 20:44 ] [ 編集 ]
[ 5835 ]
/* ▲親子カテゴリ▲ */
の下に加えました。

まだ、子の「・」が消えませんが
スタイルシートを変更すると時間差で
変更内容が修正されるのでしょうか?
[ 2009/09/05 00:55 ] [ 編集 ]
[ 5836 ] > ゆうきさん
申しわけありません。更に以下もその下に加えてみてください。

.sub_list,
.sub_list_end {
list-style: none;
list-style-type: none;
}
[ 2009/09/05 01:11 ] [ 編集 ]
[ 5837 ]
今教えていただいたものも
追加しましたが特に変わりません(汗)

何度も申し訳ありません。
[ 2009/09/05 01:28 ] [ 編集 ]
[ 5838 ] > ゆうきさん
申しわけありません。先ほどのものをこれに入れ替えてみてください。

#sidemenu .sub_list,
#sidemenu .sub_list_end {
list-style: none;
list-style-type: none;
}
[ 2009/09/05 01:45 ] [ 編集 ]
[ 5859 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/09/05 20:34 ] [ 編集 ]
[ 5899 ]
何度もすいません。

自分なりに調べて試したが
どうしてもできませんでした。

何とかならないものでしょうか。
宜しくお願いします。
[ 2009/09/07 00:35 ] [ 編集 ]
[ 5903 ] > ゆうきさん
鍵コメで教えてくれた別サイトのURLは、違うURLのサイトへリダイレクトしてしまいました。URLを確認したかったのですが、ゆうきさんのサイトはコメント投稿欄もメールフォームもないので、こちらから連絡する手段がありませんでした。
正しいURLを教えてください。
[ 2009/09/07 01:56 ] [ 編集 ]
[ 5915 ]
ゆうきです。
メールありがとうございました。

ただいま教えていただいたものでは
変化がなかったです(汗)

先日テンプレート作成者の方に問い合わせたのですが、
返信がなく困っていました・・

もう少しアドバイス願えないでしょうか?

宜しくお願い致します。
[ 2009/09/07 21:57 ] [ 編集 ]
[ 5917 ] > ゆうきさん
メールしました。
[ 2009/09/07 23:04 ] [ 編集 ]
[ 9155 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2012/08/20 04:53 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る