Top > CMS・ブログ > FC2ブログ > カスタマイズ > ツリー化 > 2006年3月
2006年3月22日

サイドメニューのツリー化スクリプト for FC2 ブログ

March 22,2006 1:10 AM
Tag:[, , ]
Permalink

サイドメニューのツリー化スクリプトMovable Type 用に公開しているサイドメニューのツリー化スクリプト(改)を FC2 ブログで適用する方法です。このカスタマイズを行うことで、スクリーンショットのようにツリー化の表示が可能になります。ツリー化が可能なリストは「最近のエントリー」「カテゴリーリスト」「アーカイブリスト」「リンク」です。

なお当サイトで公開している Movable Type ツリー化スクリプトを FC2 ブログに適用するとツリーがきれいに表示されません。その点に関しましては8項を参照ください。

1.maketree.js ダウンロード

下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください(scriptタグの設定方法につきましてては3項に記します)。

2.maketree.js アップロード

ダウンロードした maketree.js を管理メニューの「ファイルアップロード」を利用してアップロードしてください。

3.リスト表示用タグ修正および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>

4.maketree.js インクルード文挿入

HTMLテンプレートの <head>~</head> の間に下記のタグを追加してください。FC2ブログの文字コードはEUCですので、スクリプトの文字コード(utf-8)を示す青色の charset 属性は必須です。

<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>

5.画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

6.画像の配置

ダウンロードした画像を、管理メニューの「ファイルアップロード」を利用してアップロードしてください。

7.スタイルシート追加

スタイルシート(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/画像ファイル"になると思います)。画像ファイル名はアップロードした画像ファイル名と合わせてください。

8.不具合の修正

Movable Type 用のツリー化スクリプトのエントリーをご覧になってカスタマイズされた場合、冒頭に記した通りツリーがきれいに表示されません。
これを修正するにはスタイルシートに

ul.tree li {
   :
    background-position: 0 0;
   :
}

を追加してください。きれいに表示されるようになります(7項のCSSには設定済です)。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

Comments [22] | Trackbacks [4]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3