TopMovable Typeカスタマイズツリー化 > 2005年2月
2005年2月13日

maketree.js 1.01 リリース

February 13,2005 8:00 PM
Tag:[, , ]
Permalink

ツリー化スクリプトの maketree.js をマイナーバージョンアップしました。
今回の修正はツリー状のリスト(ul-li-ul-liという構造)に対する対処です。1.00ではサブカテゴリーリストにしか対応していなかったため、これを他のツリー状リストに対応させるように修正致しました。端的に申し上げますとユーザー・マニュアルメニューリストに対する対処です。
ユーザー・マニュアルを表示していない、またはツリー化表示しない場合、アップグレードの必要はありません。またアップグレードされても既存の動作には影響ありません。

アップグレードされる場合は下記のリンクでスクリプトのページへジャンプし、そこからダウンロードしてください。

download

以下、ユーザー・マニュアルで利用する場合のカスタマイズ方法を記します。

1.id 属性の変更

ユーザー・マニュアル表示用タグの id 属性(赤字部分)を、同ページの他の id 属性と重複しない任意の文字列に修正してください。ここでは hogehoge という id 属性にした例です。

<div class="sidetitle" id="manualname">
Official User's Manual
</div>
 
<div class="side" id="manuallist">
<div id="categorieshogehoge">

2.スタイルシートの追加

サブカテゴリー用のスタイル定義をコピー&ペーストして同じスタイルシートの任意の位置に追加し、id 属性(赤字部分)を1項で付与した名称に変更します。

.side #categorieshogehoge ul {
    padding-left: 15px;
    margin: 0px;
    margin-bottom: 0px;
}
 
.side #categorieshogehoge ul ul {
    margin-bottom: 0px;
}
 
.side #categorieshogehoge li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
}

3.maketree.js起動スクリプト追加

ユーザー・マニュアル表示用タグの下に下記を追加します。

<script type="text/javascript">
<!--
generateTreeForTreeStructure('hogehoge');
//-->
</script>

以上です。

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

Comments [6] | Trackbacks [3]
2005年2月 9日

サイドメニューのツリー化スクリプト(改)

February 9,2005 11:59 PM
Tag:[, , ]
Permalink

サイドメニューのツリー化サイドバーのメニューリストをツリー化するスクリプトです。このスクリプトの特徴は通常のリストだけでなく、画像のようにサブカテゴリーについてもツリー化が可能です(サブカテゴリーリストの折りたたみとの組み合わせも可能です)。本サイトのサブカテゴリーリストをツリー化しておりますので興味のある方はお試しになってみてください。
本カスタマイズに関してはsbのインストールページをヒントにさせて頂きました。ありがとうございました。
ツリー化スクリプトはJUGEMカスタマイズ講座が著名なのでここでは「改」と命名させて頂きましたが、JavaScriptにつきましてはDOMや再帰呼び出し(サブカテゴリーリスト用)を利用した全く異なる実装です。
以下カスタマイズ方法です。

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

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。
scriptタグの設定については3項に記してますのでお試し頂ければ幸いです。

2.maketree.js 配置
maketree.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

3.リスト表示用タグ修正およびJavaScript起動用スクリプト設定
ツリー化を行いたい各テンプレートのサイドバーのメニューリストのMTタグを修正します。注:MTタグは ul と li を用いたリスト形式になっていることが前提です。一部のリストは公開テンプレートのタグを入れ替える必要があります。
下記に主要なツリー化用メニューリストのMTタグサンプルおよびJavaScriptを掲載します。黒字部分がMTタグ(公開テンプレートからの変更イメージ)で、青字部分が新たに追加するid属性およびJavaScript起動スクリプトです。

Recent Entries(最近のエントリー)

<div class="side" id="entrylist">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Entries(最近のエントリー:日別表示用)

<div class="side" id="entrylist">
<MTEntries lastn="10">
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments(最近のコメント)

<div class="side" id="commentlist">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</MTEntries>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>
Recent Trackbacks(最近のトラックバック)
<div class="side" id="trackbacklist">
<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories(カテゴリーリスト:一括表示用)

<div class="side" id="categorylist">
<ul>
<MTCategories>
<li><a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br /></li>
</MTCategories>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>

Categories(カテゴリーリスト:サブカテゴリー表示用) *MTタグは修正不要です

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

注:サブカテゴリーのツリー化ではdivタグにある"categories"というデフォルトの id 属性をスクリプトで使用しています。もしこの名称を変更されている場合は maketree.js で categories という文字を検索(2ヶ所1ヶ所しかありません)し、その部分を使用されている文字と置き換えてください。

Monthly Archives(月別アーカイブリスト)

<div class="side" id="monthlylist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>

赤字部分は名称がそれぞれ一致するように指定してください。id 属性はサイドメニューの折りたたみ等で設定済であればそのままご利用ください。サブカテゴリーリストはMTタグの下にスクリプトを追加するのみで大丈夫です。またサブカテゴリーリストの折りたたみを利用されている場合は

<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','on',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse max_depth="3">
</MTTopLevelCategories>
//-->
</script>

の前後どちらに起動スクリプトを挿入してくださってもかまいません。

ツリー構造リスト(ユーザー・マニュアル等)

<div class="sidetitle" id="manualname">
Official User's Manual
</div>
 
<div class="side" id="manuallist">
<div id="manual">
   :
  (中略)
   :
</div>
</div>
 
<script type="text/javascript">
<!--
generateTreeForTreeStructure('manual');
//-->
</script>

4.maketree.js インクルード文挿入
ツリー化スクリプトを利用する各テンプレートの <head>~</head> の間に下記のタグを追加してください。charset 属性は maketree.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>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の場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ(Netscape/Firefox)で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。

6.画像の配置
ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

7.スタイルシート追加
スタイルシート(styles-site.css)の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0!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 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

赤字部分については、先ほどダウンロードした画像のファイル名にそれぞれ変更するか、画像のファイル名をスタイルシートに設定されているファイル名に修正してください。また上の設定はスタイルシートと同じディレクトリ(=ローカル・サイト・パス)に画像を配置した場合です。異なるディレクトリに配置する場合は http://? のようにURLで画像を指定してください。

8.スタイルシート修正(必要な場合のみ)
ツリー化するリストに改行されたリンクが存在する場合、IE系のブラウザではリンクをポイントした時、あるいはポイントを外した時に横にあるツリー画像が消えるという不具合が確認されています(これで3日ほど悩みました)。
その場合はスタイルシート(styles-site.css)の先頭の方にあるリンクの設定で

/* リンク文字設定 */
    :
a:link {
    color: #8FABBE;
    background: none;
}
a:visited {
    color: #8FABBE;
    background: none;
}
a:active {
    color: #8FABBE;
    background: none;
}
a:hover {
    color: #006699;
    background: none;
}

の赤字部分をコメントアウトまたは削除してください。

以上です。

9.FAQ
Q:ツリーが表示されません
A:主に下記の原因が考えられます。

  • maketree.js 起動スクリプトの設定(5項)が誤っている
  • ツリーを表示するリストが ul - li の形式になっていない、あるいは ul - li タグが正常に閉じられていない。
  • 画像がアップロードされていない(6項の設定もれ)
  • 4項が設定されていない
  • 4項で設定したパスに maketree.js が存在しない(トップページからHTMLソースを参照し、maketree.js をインクルードしている script 要素の src 属性(URL)をマウスコピーして、ブラウザで直接指定して実行し、ダウンロード等ができればOK)
  • ブログと maketree.js の文字コードが一致していない
  • 6項で指定した位置に画像が存在しない(スタイルシートで指定した画像ファイルのURLを指定してダウンロードできればOKです。http://?という形式で指定していない場合はスタイルシートと同じディレクトリに配置されていることが必要です)
  • 公開テンプレートでサブカテゴリーリストが表示されない場合、リスト全体がコメントアウトされている(詳細はカテゴリーリストをサブカテゴリー表示に切り替えるをご覧ください)
  • HTMLまたはスタイルシートのフォーマットが誤っている。Another HTML-lint gatewayW3C CSS 検証サービスで致命的なエラーがないかご確認ください
  • 3項で追加したスクリプトのフォーマット誤り(「"」が抜けている、HTMLタグが「<<?」になってしまっている等)
  • 3項で設定した id 属性値とスクリプトを起動する時のパラメータが一致していない(要するに赤色の名称が不一致)

Q:ツリーの終端が閉じません(途中に表示されるものと同じものが表示される)
A:サブカテゴリーのツリー化で generateSubcategoryTree(); が使われていない可能性があります。言い換えると、サブカテゴリーのツリー化で generateNormalTree("~") を使うと質問の症状になります。

ここで解決しない場合、コメント欄に他の解決内容がありますのでご一読頂ければ幸いです。

2005.02.11 追記
「最近のエントリー」の日別表示用タグを追加しました。

2005.02.12 追記
サブカテゴリーリストのツリー化での注意書きを追記しました。

2005.02.13 追記
ツリー構造リストのツリー化について記述を追記しました。

2005.08.02 追記
FAQを追加しました。

2005.09.05 追記
Recent Comments のソースを XHTML valid になるよう修正しました。

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

2006.04.21 追記
9項のFAQを追加しました。

Comments [245] | Trackbacks [94]
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