2008年11月27日

2008 11.27 Thu


トップページにツリー型カテゴリ表示

久しぶりにSeesaaブログのカスタマイズ。
まぁ、応用で他のブログでも使えるかもしれません。

こつこつ自分でリンクを貼り付けていけば、簡単にデザインできるんだろうけど、
そのうち記事カテゴリ弄ったりした時に、ある程度は自動更新で対応するようにチャレンジ。


まず、新しいコンテンツの追加で「カテゴリ」追加。


表示位置を「メイン」、並び順は適当に。


記事カテゴリ名を、「大カテゴリ名>サブカテゴリ名」にする。
(>は全角)並び順も微調整。


「挿入テキスト(下部)」にスクリプトをコピペする。

<SCRIPT type="text/javascript">
<!--

tree("カテゴリ","content");

function tree(title,position)
{
var category=new Array();
var subcategory=new Array();
category[0]=null; subcategory[0]=null;

if(position=="content"){
position="content";
}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+=("<div class=cate>■ "+category[i]+"<br><br></div>");
}else{
if(category[i]!=category[i-1]) tmpHTML+=("<div class=cate>■ "+category[i]+"<br>");
if(category[i]==category[i+1]){
tmpHTML+=("├"+subcategory[i]+"<br>");
}else{
tmpHTML+=("└"+subcategory[i]+"<br><br></div>");
}
}
}
target.innerHTML=tmpHTML;
}

// -->
</SCRIPT>


コンテンツ>カテゴリ>HTMLの、最後に
<br clear="all" />


CSSに、
.cate {
width:240px;
float:left;
text-align:left;
margin-left:20px;
}

を足して、出来上がり。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのコメント
ブロック要素を横に不特定数並列させて、且つ、指定した幅で自動で改行させる。
最初、tableタグで試みたけど、無理だった。
よく考えればフロートCSSはブログの鉄板ブロックでした。
思い付くのに丸一日架かってしまった。
Posted by カスタマイズ at 2008年11月29日 00:40

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・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.