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

サブカテゴリーリストの折りたたみ(MT3.x デフォルトテンプレート版)

February 18,2007 1:03 AM
Tag:[, , ]
Permalink

サブカテゴリーリストの折りたたみ(デフォルトテンプレート版)Movable Type 3.x のデフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

1.スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

2.menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認(または修正)してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = true;
 
       :
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする:true
// 無効にする:false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '';
var closeMarkForSubCategories = '';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

subCategory

  • 名称:サブカテゴリーの折りたたみ有効フラグ
  • 用途:サブカテゴリーの折りたたみの有効/無効を設定します。ここでは有効にします。
  • 設定値: true:有効/false:無効

openMarkForSubCategories/closeMarkForSubCategories

  • 名称:サブカテゴリーの折りたたみマーク
  • 用途:サブカテゴリー名横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

offsetForTitleAndMarkOfSubcategory

  • サブカテゴリーのタイトルとマークのスペース
  • 用途:サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
  • 設定値:0以上

3.スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

4.テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください(分からなければとりあえずサンプルのまま貼り付けてください)。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は1.1項、ツリー化する場合は1.2項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

5.1 ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

5.2 ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

6.スタイルシート変更

ツリー化しない場合は2.1項、ツリー化する場合は2.2項の CSS をスタイルシートに追加してください。

6.1 ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

6.2 ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

7.ツリー画像のダウンロード

ツリー化する場合は、7項・8項を実施してください。

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

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

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは6項の CSS(青色部分)で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時(またはダウンロード後)、ファイル名は tree_lst.gif に変更してください。

8.画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

2010.05.02
タイトルおよび本文の一部にMT3.x向けの記事である旨を追記しました。

Comments [14] | Trackbacks [2]
2007年2月 9日

サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

JavaScript不要なサブカテゴリーリストのツリー化+折りたたみ for Movable Type以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。

このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。

1.スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

2.menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認(または修正)してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = true;
 
       :
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする:true
// 無効にする:false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '';
var closeMarkForSubCategories = '';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

subCategory

  • 名称:サブカテゴリーの折りたたみ有効フラグ
  • 用途:サブカテゴリーの折りたたみの有効/無効を設定します。ここでは有効にします。
  • 設定値: true:有効/false:無効

openMarkForSubCategories/closeMarkForSubCategories

  • 名称:サブカテゴリーの折りたたみマーク
  • 用途:サブカテゴリー名横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

offsetForTitleAndMarkOfSubcategory

  • サブカテゴリーのタイトルとマークのスペース
  • 用途:サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
  • 設定値:0以上

3.スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

4.テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください(分からなければとりあえずサンプルのまま貼り付けてください)。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートにサブカテゴリーリスト表示用タグを追加

折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ(下記)をテンプレートの任意の位置に設定します。

<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryID$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。

赤色部分は下記を参照して適宜変更してください。

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

6.CSS追加

下記を styles-site.css に追加してください。

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾(装飾なし) */
}

7.ツリー画像のダウンロード

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

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

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは6項の CSS(青色部分)で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時(またはダウンロード後)、ファイル名は tree_lst.gif に変更してください。

8.画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。

2008.10.14
リストの MTSubCategories タグを MTTopLevelCategories タグに変更しました。

Comments [33] | 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