- 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
Comments
コメントエリアをスクロールする / スクロールを解除する
こんにちは。朝和です。
ユヅさんも移行したし、僕もそろそろ…とSereneBachへの準備を始めました。
カテゴリのプルダウン化も問題なく取り入れられて、サイドが若干スッキリした気が(苦笑)あとは、アーカイブとリンクが折り畳めたらいいな、と。
また、いろいろと参考にさせて頂きますね。
ユヅさん、こんにちわ。
この度、カテゴリーズラズラ～が気になりまして、スッキリさせようといろいろやってましたがうまくいかず、sbのTBピープルでこちらの記事を見て飛んでまいりました。
早速試させていただき、大満足です。本当に感謝感謝です。ありがとうございました。
試行錯誤で土日の２日間も費やしてしまったので、今夜はゆっくり眠れそうです(￣∀￣；
こんにちわ。
早速ありがとうございます♪
書いてある通りにしたら簡単に出来ました！
トラバさせていただきます。
ありがとうございました。
ユヅさん、こんにちは。
以前からとても気になっていたカテゴリー欄、これでとてもスッキリしました。ありがとうございました！いつもいつも、大変お世話になっています♪
●朝和さん
こんにちは。
アーカイブも件数登録なしで手動ならと思いますが面倒ですよねー。独自タグだと本体の出力タグいじらないことにはどうにも…(´Д⊂
私は高さを固定してスクロール出るようにしております。
●はゆるさん
こんにちは。
カスタマイズお疲れ様です。
うまくいったようでよかったですね＾＾
わぁ、土日２日間も！悩みだすと朝までとかよくあります＾＾；
●まなさん
こんにちは。
わかりやすく書けたか不安だったのですが、無事できたようでよかったですー＾＾
●ゆゆさん
こんにちは～♪
細かくすると縦に伸びるし、大まかにすると記事が探しにくいし、なかなか悩みどころですよね＾＾
こんにちは。
教えてください。
ひとつのページに2ヵ所、カテゴリーのプルダウン化をしたいのですが、どうしたらよいのでしょうか？
1ヵ所だと上手くできるのですが・・・。
●ちむ。さん
HTMLの方のタグの中に「treeMenu1」というのが２回でてきますよね。
その「1」の数字が他と重ならないようにして下さい。
１つめのプルダウンで１～５までを使ったら、２つめのプルダウンでは６～１０を使うとか。
同じidが重複しないようにすればどちらも正常に動作すると思います。