サイドメニューのツリー化スクリプト for FC2 ブログ
なお当サイトで公開している Movable Type ツリー化スクリプトを FC2 ブログに適用するとツリーがきれいに表示されません。その点に関しましては８項を参照ください。 |
Movable Type 用に公開している１．maketree.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。
本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください（scriptタグの設定方法につきましてては３項に記します）。
２．maketree.js アップロード
ダウンロードした maketree.js を管理メニューの「ファイルアップロード」を利用してアップロードしてください。
３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定
管理メニューの「テンプレートの設定」からテンプレートの編集欄の「修正」のリンクをクリックして、テンプレートの編集画面を表示します。そしてサイドバーのメニューリストのブロック変数の一部を修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定しているブロック変数で、青色部分が新たに追加する部分です。赤色は任意の名称を設定します（タグの id 属性とスクリプト部分の名称が一致するように設定してください）。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。
Recent Entries
<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 -->
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>Categories
<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category-->
</ul>
</div>
<!-- カテゴリーリスト終了 -->
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>Archives
<!-- 月別アーカイブリスト開始 -->
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="archivelist">
<ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月</a> [<%archive_count>]</li>
<!--/archive-->
</ul>
</div>
<!-- 月別アーカイブリスト終了 -->
<script type="text/javascript">
<!--
generateNormalTree("archivelist");
//-->
</script>Links
<!-- リンク開始 -->
<div class="sidetitle">
Links
</div>
<div class="side" id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<!-- リンク終了 -->
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>４．maketree.js インクルード文挿入
HTMLテンプレートの <head>～</head> の間に下記のタグを追加してください。FC2ブログの文字コードはEUCですので、スクリプトの文字コード（utf-8）を示す青色の charset 属性は必須です。
<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>５．画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。
６．画像の配置
ダウンロードした画像を、管理メニューの「ファイルアップロード」を利用してアップロードしてください。
７．スタイルシート追加
スタイルシート（style.css）の.sideの下辺りに下記のクラス指定を追加します。
ul.tree {
margin: 0 0 0 3px!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 13px!important;
background-image: url(http://domain/file/tree_lst.gif);
background-position: 0 0;
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://domain/file/tree_end.gif);
list-style: none;
}赤字部分については、アップロードしたファイルのURLを指定します（"http://ご自身のドメイン/file/画像ファイル"になると思います）。画像ファイル名はアップロードした画像ファイル名と合わせてください。
８．不具合の修正
Movable Type 用のツリー化スクリプトのエントリーをご覧になってカスタマイズされた場合、冒頭に記した通りツリーがきれいに表示されません。
これを修正するにはスタイルシートに
ul.tree li {
：
background-position: 0 0;
：
}を追加してください。きれいに表示されるようになります（７項のCSSには設定済です）。
2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。
