メニューから、各資格リンク先へ行けます。合格!で決定。



2009年03月21日

カテゴリーをツリー化する方法(seesaa限定)

このseesaaブログで行ったカスタマイズを公開することにより、
seesaaユーザーの皆様のお役にたてればと思います。

今回は、ブログのカテゴリーをツリー化する方法を記述したいと思います。


カテゴリーをツリー化するとは

当ブログでは、カテゴリーをツリー化しています。
ツリー化とは、右のカテゴリー欄にあるような形です。
カテゴリーの表示が、木の枝のように伸びていることから、ツリー化と言われます。


このように表示することによって、カテゴリーが増えてきたときに見やすくなる効果があります。
しかし、デフォルトの設定では、ツリー化に対応していないため、こちら側で設定する必要があります。


ツリー化設定の中身


それでは、ツリー化を設定するとは一体どういうことでしょうか?

これは、通常のhtmlではなく、java script を用い設定します。

なので、記事投稿の記事カテゴリ欄をいじるだけでは、設定できません。
デザインのHTML欄をいじる必要があります。

それでは、実際に設定方法を確認しましょう。


ツリー化の方法


まず、マイブログのページから、
デザインを選びます


デザイン選択


次に、その中から、HTMLを選択します。


HTML選択


そして、自分の使っているものを選択します。


tree選択

私の場合、treeというものに当たります。


そうすると、
HTMLの画面が開きます

HTML記述画面


ずらっと、ややこしそうな文字が並んでいます(^^)


HTMLの画面をずっと下にスライドして、
一番最後の</div>
というところを探します。

</div>というのは、頻繁にでてくるので、
その中でも一番最後に出てくるやつです。


その下には、
</body>
</html>
という記述があり、そこでHTMLの記述が終わっているはずです。


今回いじるのは、この
最後の</div>

</body>
の間です。

ここに、下の枠内に書いてあるjava script を挿入します。


方法としては、
枠内のjava script を
全部コピーして、

先ほど見つけた
</div>の後に貼り付けします。

↓コピーしてください。
<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("カテゴリ","右or左");                 //←右か左か選択してください

の所を、あなたのブログのカテゴリーの位置に合わせて、選択してください


例えば、私のブログでは、カテゴリーが向かって右にあるので、

tree("カテゴリ","右");                 //←右か左か選択してください

と、修正します。


これが、左側にある人は、

tree("カテゴリ","左");                 //←右か左か選択してください

として下さい。


 //←右か左か選択してください
ここは、別に触る必要はありません。


完成のイメージとしては、

始まりは、

ツリー化始め


終わりは、

ツリー化終わり


のような感じです^^


ここまで出来たら、
プレビューで確認してください。

OKならば、保存をして、

最後に
デザイン→コンテンツ
から、


設定を反映する
を選び、
再構築してください。


注意すること


HTMLをいじる際は、
絶対に、元の記述をメモ帳などに保存してから行ってください


保存しておかないと、
いじった結果、構築が崩れた時に元の形に戻せなくなるおそれがあります。


また、設定後は、必ず「保存」をしてから、違うページへ移動してください。


設定した後、保存をするのを忘れてしまうと、
設定が何も変更されていないので、気をつけてください。


また、最後に必ず、
デザイン→コンテンツ
からの、
設定を反映する」を選んでください。

これは、再構築といって、
HTMLなどをいじった際は、
必ず「設定を反映する」を選ぶ癖をつけてください。


これをしておかないと、
マイページからはちゃんと見れても、
一般のページからは、設定が崩れているおそれがあります。


以上、注意書きのところで書いたことが分からない人は、
今はまだカスタマイズしない方が良いかもしれません。

あくまでも自己責任で、よろしくお願いします。

なお、冒頭にも書きましたが、あくまでもseesaaブログ限定の方法ですので、
違うブログサービスには対応を保証できません。
ご了承ください。



スポンサーリンク

あなたに合格が訪れますように講師ゆうbr_decobanner_20091018180502.gif
いつも応援ありがとうございますありがとうニコッ.gif
【ブログカスタマイズ>カテゴリーのツリー化の最新記事】
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。