2012年09月27日

2012 09.27 Thu


カテゴリーをツリー表示
サイドバーに表示させる記事カテゴリー(コンテンツ)メニューをサブカテゴリー化して簡単に分類表示する方法。
  
 
1. 記事カテゴリ名を、「大カテゴリ名>サブカテゴリ名」にします。(>は全角)


2. [デザイン]→[コンテンツ]→[カテゴリ]を表示。
「挿入テキスト(下部)」に以下のスクリプトをコピペします。
※この方法だと、HTMLの追加をする必要はありません。
 しかも高速表示



3. 再構築して完成。

///で囲まれた部分を書き換えます。
tree("カテゴリのタイトル名","カテゴリがあるのは右サイドバーか左サイドバーか");

例)カテゴリのタイトル名が「目次」で右サイドバーにある場合
    tree("目次","右");
と書き換えます。

<script>
/////////////////////////////////
tree("カテゴリ",""); //←ここを変更する
/////////////////////////////////
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>


次に、

マイブログ→デザイン→コンテンツ→カテゴリ
→右上の「コンテンツ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)

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/22636959
※言及リンクのないトラックバックは受信されません。

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.