久しぶりにSeesaaブログのカスタマイズ。
まぁ、応用で他のブログでも使えるかもしれません。
こつこつ自分でリンクを貼り付けていけば、簡単にデザインできるんだろうけど、
そのうち記事カテゴリ弄ったりした時に、ある程度は自動更新で対応するようにチャレンジ。
まず、新しいコンテンツの追加で「カテゴリ」追加。
表示位置を「メイン」、並び順は適当に。
記事カテゴリ名を、「大カテゴリ名＞サブカテゴリ名」にする。
（＞は全角）並び順も微調整。
「挿入テキスト(下部)」にスクリプトをコピペする。
<SCRIPT language="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;
}
を足して、出来上がり。
みなさんはどう思いますか？
最初、tableタグで試みたけど、無理だった。
よく考えればフロートCSSはブログの鉄板ブロックでした。
思い付くのに丸一日架かってしまった。