2010年3月2日更新日：2023/12/29 IT・コンピューターフィッシング

dtreeの設置

エクスプローラー風カテゴリーマップです

このようなエクスプローラー風にカテゴリーマップが表示されたらいいなぁ・・・

そう思ったことはありませんか

今日はブログカスタマイズの小技

カテゴリマップをサイドバーに表示してみましょう。。。

?まず、dtreeのソースをダウンロードします

?その中のdtree.jsファイルを開き、

129行目から168行目の

root: 'http://www.＊＊＊＊＊＊/dtree/img/base.gif',

folder: 'http://www.＊＊＊＊＊＊/dtree/img/folder.gif',

folderOpen : 'http://www.＊＊＊＊＊＊/dtree/img/folderopen.gif',

node: 'http://www.＊＊＊＊＊＊/dtree/img/page.gif',

empty: 'http://www.＊＊＊＊＊＊/dtree/img/empty.gif',

line: 'http://www.＊＊＊＊＊＊/dtree/img/line.gif',

join: 'http://www.＊＊＊＊＊＊/dtree/img/join.gif',

joinBottom : 'http://www.＊＊＊＊＊＊/dtree/img/joinbottom.gif',

plus: 'http://www.＊＊＊＊＊＊/dtree/img/plus.gif',

plusBottom: 'http://www.＊＊＊＊＊＊/dtree/img/plusbottom.gif',

minus: 'http://www.＊＊＊＊＊＊/dtree/img/minus.gif',

minusBottom: 'http://www.＊＊＊＊＊＊/dtree/img/minusbottom.gif',

nlPlus: 'http://www.＊＊＊＊＊＊/dtree/img/nolines_plus.gif',

nlMinus: 'http://www.＊＊＊＊＊＊/dtree/img/nolines_minus.gif'

↑このようにプルパスでURLを記入し上書きしてすべてをサーバーにアップします。

?次はナチュラムのブログ環境設定ーカスタムプラグインに以下のタグを記入します

<div class="sidetitle">エクスプローラー風もくじ</div>

<div class="side">

<div class="sidebody">

<head>

<link rel="StyleSheet" href="http://＊＊＊＊＊＊/dtree/dtree.css" type="text/css" />

<script type="text/javascript" src="http://＊＊＊＊＊＊/dtree/dtree.js"></script>

</head>

<body>

<div class='dtree'>

<p><a href='javascript: d.openAll();'>open all</a> | <a href='javascript: d.closeAll();'>close all</a></p>

<script type='text/javascript'>



</script>

</div>

</body>

</div>

</div>

?以上でおわりです。

階層の作り方はd.add(1130, 30,・・・とありますが、最初の番号はなんでもいいのです。重複しない数字がいいでしょう。２番目の番号は親の管理番号なのです。

それぞれ、リンクURLを指定してやると、エクスプローラー風のツリーマップの完成です。