BlogPeopleリストのツリー化

ブログ::カスタマイズページ集 β版経由で見つけたカスタマイズです。

サイドバーなどに表示しているBlogPeopleのリンクリストをツリー化する技です。
＜参照先＞JUGEMカスタマイズ講座 | BlogPeopleリストのツリー化
(JUGEM以外でもOKです！)

↑うまくいくとこんな感じに表示できます。
JUGEMカスタマイズ講座さんでこれ以上ないくらい親切丁寧に解説されているのですが以下覚書です。

1.)BlogPeopleの設定
BlogPeopleにログインして「設定」画面を確認します。

• 4.リンクリストのタイトル表示と区切り→タイトル表示をする
• 6.リンクの出力形式→<div>タグ形式
• 7.更新マーク表示時間→グラフィックまたはテキストどちらかひとつにする
• 8.HTMLタグの利用→<a>タグの前：<span class="bplist">
  　　　　　　　　　　　　　</a>タグの後：</span>

2.)スタイルを追加
スタイルシートのテンプレートに以下を追加
span.blogpeople-linklist { font-weight: bold; }div.blogpeople-main ul.tree { list-style: none; margin: 0px; padding: 0px; } div.blogpeople-main ul.tree li { margin: 0px; padding: 0px 0px 0px 16px; font-size: 100%; background-image: url(http://simpleboxes.jugem.cc/?image=29); background-repeat: no-repeat; } div.blogpeople-main ul.tree li.end { background-image: url(http://simpleboxes.jugem.cc/?image=30); }

3.)スクリプトの追加
リンクリストを表示する為のスクリプトのすぐ後ろにもうひとつ追加します。
<script type="text/javascript" src="http://nz.jugemers.net/script/bptree.js"></script>

4.)リビルドして完了♪

スタイルシートをお好みで変更する事でリンクリストの文字をカスタマイズできます。
ワタシは太字にしただけですが…
それからツリー用の画像が重くて評判のJUGEMにある為たまに表示されなくなってしまうので直リンクを止めてしまいました。