- date
- 051211
カテゴリーのプルダウン化
リクエストのあったカテゴリーのプルダウン化。
JavaScriptを使って、親カテゴリ名をクリックするとサブカテゴリを表示させます。JavaScriptを切った場合は、プルダウンはできませんが親カテゴリのカテゴリリストからそのまま飛べるようになっています。
※注意
テンプレートに直接書き込む形になるので、カテゴリごとの記事数の表示は行われません。カテゴリの追加や削除をした場合はテンプレートの方も修整して下さい。
sb、SereneBachどちらでも使えます。
その他のブログツールでも、HTML編集ができてカテゴリーのURLが分かるものならば大抵は出来ると思います。
CSSで見た目も自由にカスタマイズできます。
▼JavaScript | <head>と</head>の間。
▼HTML | <body>と</body>の間で任意の場所。
ulが2つあって親カテゴリのliの中にサブカテゴリのulとliが入る構成。
▼親カテゴリの増やし方
<!--メインカテゴリここから-->と<!--メインカテゴリここまで-->の間は親カテゴリの数だけ繰り返し、treeMenu1、treeMenu2…と通し番号をつけます。
▼サブカテゴリの増やし方
サブカテゴリのliを必要な数だけ繰り返します。
<li><a href="{site_cgi}?cid=●">サブカテゴリ1</a></li>▼サブカテゴリがない場合
単独の親カテゴリはこの１行だけで構いません。
<li><a href="{site_cgi}?cid=●">カテゴリ1</a></li>
▼カテゴリーURLについて
cid=●はcid=1やcid=12など、カテゴリIDが入ります。カテゴリIDは管理画面のカテゴリーリストに表示されていますので、カテゴリー名に対応したidを入れて下さい。
sb/SB以外の方はリンク先URLを各カテゴリーのURLにして下さい。
※HTMLの一例
サブカテゴリのあるPhotoと映画、サブカテゴリなしの日記の組合せ
▼CSSの編集 | 必須ではありませんのでお好みで。
サブカテゴリの頭を1文字分ずらすのと、アイコンをつけたい時のCSS。
文字色はリンク色になるので指定する必要はありません。フォントサイズやマージン等、親要素で指定されていなければお好きなように付け足して下さい。
最後の/* 位置調整とリストマーク消し */については、sb/SBのテンプレートではCSSにあらかじめ入っていることが多いのでその場合は不要です。blog*citronのテンプレートでも最初から書いてあるので加える必要はありません。
Blog Feed