ただ並んでいるだけでなく綺麗に整理したいですよね。
カテゴリをツリー化してみましょう。
ツリー化を行うことによってサブカテゴリが作られ、
カテゴリーが増えても綺麗に整理できます。
実際にどのようになるのかはこのブログのカテゴリの部分を見てください。
Des notes de KOHtanさんで紹介されている方法を元に私も設置してみました。
以下に自分なりに分かりやすく設置方法を纏めておきます。
【設置方法】
１．Javascriptを作る
◆ 日記 ←メインカテゴリ
├バトン(10) ←サブカテゴリ
カテゴリが上記のようになるのを目指します。
メモ帳などに以下をコピペして下さい。
| <SCRIPT language="JavaScript"> <!-- ////////////////////////////////////////////////////////////////////////////////// tree("カテゴリ","右or左"); //←自分のブログのカテゴリ名 ////////////////////////////////////////////////////////////////////////////////// function tree(title,position) { var category=new Array(); var subcategory=new Array(); category[0]=null; subcategory[0]=null; if(position=="左"){ position="links-left"; }else if(position=="右"){ position="links"; }else{ return; } var tmp=document.getElementById(position).getElementsByTagName('div'); for(var i=0;i<tmp.length;i++){ if(tmp[i].innerHTML==title) break; } if(i==tmp.length) return; var target=tmp[i+1]; var tmp2=target.getElementsByTagName('a'); for(var j=0;j<tmp2.length;j++){ var link=tmp2[j].innerHTML; if(tmp2[j].innerHTML.indexOf("＞")==-1){ category[j+1]="<a href="+tmp2[j].getAttribute('href')+">"+ link+"</a>"; subcategory[j+1]=null; }else{ category[j+1]=link.substring(0,link.indexOf("＞")); subcategory[j+1]="<a href="+tmp2[j].getAttribute('href')+">" +link.substring(link.indexOf("＞")+1,link.length)+"</a>"; } } category[j+1]=null; subcategory[j+1]=null; //出力 var tmpHTML="<br>"; for(i=1;i<(category.length-1);i++){ if(subcategory[i]==null){ tmpHTML+=("◆ "+category[i]+"<br><br>"); }else{ if(category[i]!=category[i-1]) tmpHTML+=("◆ "+category[i]+"<br>"); if(category[i]==category[i+1]){ tmpHTML+=("├"+subcategory[i]+"<br>"); }else{ tmpHTML+=("└"+subcategory[i]+"<br><br>"); } } } target.innerHTML=tmpHTML; } // --> </SCRIPT> |
上記の赤い部分を自分のブログに合わせて変更する。
tree("カテゴリ名","カテゴリがあるのはどちらのサイドバーか");
例）右サイドバーにカテゴリがあり、カテゴリ名が「カテゴリ」の場合
tree("カテゴリ","右");
注1）カテゴリ名はメインカテゴリ名ではありません。
うちのブログで「カテゴリ」となっている部分です。
大抵のブログは「カテゴリ」や「Category」という名称のはずです。
注2）上記ソースの「◆ 」は各メインカテゴリの頭に付きます。
各自好きなように変更してください。
２．HTML編集
マイブログ→デザイン→HTML→HTMLの追加
（過去に追加している場合はそれを編集するか、
今回追加したものに過去のも合わせて編集）
一番最後の「</div>」と「</body></html>」の間に上で作ったスクリプトを
コピペして保存する。
注）今回作ったものを「適用」するのを忘れずに。
３．コンテンツHTML編集
マイブログ→デザイン→コンテンツ→カテゴリ
→右上の「コンテンツHTMLの編集」
変更前
| <div class="sidetitle"><% content.title %></div> <div class="side"> <% content.header -%> <% loop:list_category -%> <a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br /> <% /loop -%> <% content.footer -%> </div> |
変更後
| <div class="sidetitle"><% content.title %></div> <div class="side"> <% content.header -%> <% loop:list_category -%> <a href="<% category.page_url %>"><% category.name | tag_break %>(<% category.article_count | __or__ | echo("0") %>)</a><br /> <% /loop -%> <% content.footer -%> </div> |
</a>の位置が変わっただけ。
これを行うことで以下のようにサブカテゴリに記事数が表示される。
◆ 日記
├バトン(10)
４．サブカテゴリを作成
◆ 日記
├バトン(10)
この赤い部分です。
通常カテゴリを追加するのと同様に
マイブログ→記事→記事カテゴリ
カテゴリ名を「メインカテゴリ名＞サブカテゴリ名」とします。
「＞」は全角であることに注意して下さい。
例）メインカテゴリ「日記」にサブカテゴリとして「バトン」を追加
記事カテゴリ名「日記＞バトン」
メインカテゴリ、サブカテゴリは今後いくらでも増やせます。
５．再構築する
まずトップページを再構築して、出来てるか確認します。
ちゃんと出来ていたらブログ全体を再構築しましょう。
カテゴリがツリー化されていれば成功です。
読んでいるだけで理解するのは大変なので、一度上記の手順で編集してみましょう。
実際にやることによって「意外にに簡単かも」って思えるでしょう。
もし分からないことがあれば、コメントにて質問していただければ
答えられる範囲でお答えします。
ｻｯﾊﾟﾘﾜｶﾗﾝ・・・＿|￣|○
私の頭のOSをなんとかしてくらさい・・・＿|￣|○
でも、おかげでシスさんの知的な部分に
ご飯３杯いけますた(*´д`*)ﾊｧﾊｧ
お洋服、いいの買えたですか〜♪？
漫画読み終わったのですが、あれって途中でおわっちゃってるよね〜＞＜？？
でも出来たのは超地味という・・・
というかJavascriptは拾ってきたのに何処でこんなに迷ったのかとｗ
後はラビさんのブログっぽく、自分のコメントだけ色付けたいんだけどね〜。
どっかにJavascriptおっこって無いかしらｗ
洋服は・・・洋服は・・・
連休引きこもってたよ私orz
買い物行こうって言われた気がするけど断ったしなぁ・・・
恋をしたら頑張るよ（ぉぃ
どこで探して説明文を読んでも、チンプンカンプンなわたしで
諦めていましたが、シス様のおかげで、なんとかこんなわたしでも
できました！
本当にありがとうございました！
すごくわかりやすかったです(*^_^*)
感謝しております！
ありがとうございました！
お役に立てて嬉しいです！＞＜
しかし、シス様なんて((((；ﾟДﾟ)))
私は他サイト様からやり方を教えてもらってるだけのヘタレorz
シーサーブログは色々カスタマイズできますからね。
うちのブログも色々やってますが
その中でも「クッキー保存」なんて便利ですよ！
もしよければ、右のカテゴリから「ブログカスタマイズ」でやり方が乗ってます。
この度の記事、大変参考になりました。有り難う御座いました!!
数ある、その他の同様記事の中で最も判りやすく、
ヘナチョコ知識の俺でも何とかなりました。
どうもお世話になりました´ω`)ﾉ
私もヘナチョコなので、詳しく書いておかないと後で何をしたか分からなくなってしまうのですよね＾＾；
ただ、質問があってコメントさせて頂きますm_ _m
サブカテゴリを作ったところは、１行１行詰まっているのですが、
サブカテゴリを作っていないところは、
■
（スペースが１行分あいている。）
■
となってしまいます。
このスペースを無くすにはどうしたらよいのでしょうか？
（自分のブログURLを貼りましたので、見て頂けたら幸いです。
よろしくお願いしますm_ _m
ブログ拝見させていただきましたっ！(ﾟ∇ﾟ〃
って、ええええええ！！！
ニコニコ動画で超超有名なピアノ動画アップされている方じゃないですか((((；ﾟДﾟ)))
何度も見させていただいています！
っと、本題を忘れるところでした（汗
行間が一行空くという事は、2回改行されているという事ですね。
ここでは<br>が改行を意味する記号となっています。
<br><br>となっている所(2か所)を、<br>に直せば行間が詰まると思いますよ〜。
（＆動画みてくださっていたとは嬉しい限りですm_ _m
＞<br><br>となっている所(2か所)を・・・
デザイン→コンテンツ→「カテゴリ」→コンテンツHTML編集
というところでしょうか？
（うう、、どこで編集するかわかりますでしょうか？
スタイルシート編集でもなさそうだし。。
時間があるときでよいです、、
よろしくお願いしますm_ _m
このブログの記事の「１．Javascriptを作る」でコピペしたヤツですね〜。
具体的に言うと、下の方の「//出力」以下にある<br><br>二箇所です。
「マイブログ→デザイン→HTML」から、書き換えれば大丈夫だと思いますよ〜。
最近ブログを始めて、ツリー化したいと思い色々検索していたら、たどり着きました。
非常にわかりやすい説明で、無事ツリー化できました。
ありがとうございました。
無事にツリー化出来たようでなによりです！
そしてiPhoneかっこよす・・・
丁寧に説明してくだすったおかげで
無事にカテゴリ改行無になりましたm_ _m
今ブログの引越しを考えているところだったのです。
SeeSaaの使い勝手はまだよくわかりませんが…
IceSpaは楽しい！
ありがとおうございましたm_ _m
他のブログ使ったことないのでよく分かりませんが、
seesaaの使い勝手はあんまり良くない気もしますね・・・
頑張っていろいろカスタマイズしたりもしてますが、他のブログだとデフォで備わっている機能だったりしますし（汗
昔、ネトゲ日記でSSを大量にアップする事もあり、アップロード出来るファイルサイズの合計が大きかったseesaaを選んだのですが、今は何処も結構容量大きいみたいですしね〜。
まぁ、一時期記事を投稿しても全く反映されなかったりという時期もありましたが、最近は安定しているようですし、悪くはないのかな？
＞IceSpaは楽しい！
全力で同意せざるを得ない。
Seesaa、どうも自分には使いにくくて（記事投稿のときにプレビュー画面がない、、）
結局アメーバがメインになりそうです
色々と教えてくだすったのにアメーバに浮気してしまいすいません＆ありがとう！を言いたくてきました
では(=ﾟωﾟ)ﾉSpa
私も、最初は人目に付きにくい昔の日付で投稿して、色々修正した後に最新の日付に修正とかよくやってました（汗
記事を確認するだと、正確なプレビューが見れないんですよね(´･ω･`)
私も引越しする機会があったらアメーバにしてみようかしら(ﾟ∇ﾟ〃