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

Top ＞ Movable Type ＞カスタマイズ＞カテゴリー＞サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

2007年2月 9日

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

Posted at February 9,2007 12:50 AM
Category：[カテゴリー, ツリー化, 折りたたみ]
Tag：[Customize, MovableType, SubCategory, Tree]

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

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

１．スクリプトのダウンロード

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

download

２．`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以上

３．スクリプトのアップロード

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

４．テンプレートに script 要素追加

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

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

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

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

<MTSubCategories>
<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>
</MTSubCategories>
 
<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 タグに変更してください。

６．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; /* マークの文字装飾（装飾なし） */
}

７．ツリー画像のダウンロード

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

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

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

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

８．画像のアップロード

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

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

Posted by yujiro

« ゲストブックの設置とページ分割 for WordPress | Main | カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

ありがとう御座います。
早速、適用して無事折りたたみ出来るようになりました。

[1] Posted by thomas : February 10, 2007 3:02 AM

＞thomasさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは！

[2] Posted by yujiro : February 11, 2007 12:06 PM

本記事を参考にさせていただき、サブカテゴリーリストの折りたたみ+ツリー化に成功しました。
どうもありがとうございます。

一点お尋ねしたいのですが、カテゴリー名のところにマウスポインターを移動するとツールチップ（？）で表示される数字は何を意味しているのでしょうか？

カテゴリー名の右側にカッコ付きで表示されるエントリー数とは一致していないので、疑問に思っております。

もしよろしかったらご回答いただけると幸いです。

[3] Posted by eden : September 22, 2007 11:31 AM

＞edenさん
こんにちは。
ご質問の件ですが、表示される数字は「カテゴリーID」です。
ツールチップとして表示させる目的よりも、カテゴリーリストに同一カテゴリー名が存在する時に、title 属性（ツールチップ）の内容が異なっていれば valid な (X)HTML となるので、おそらくその目的で与えてたものと記憶しています。
title 属性の内容を変更すれば数字以外の表示にすることができますので、お試しください。
それではよろしくお願い致します。

[4] Posted by yujiro : September 25, 2007 3:40 PM

>yujiroさん
詳細な回答、ありがとうございました。
なるほどカテゴリーIDなんですね。
疑問が晴れてすっきりしました。
お忙しいところ、お手数をおかけして申し訳ございませんでした。
今後ともどうぞよろしくお願いいたします。

[5] Posted by eden : September 25, 2007 10:16 PM

＞edenさん
こんにちは。
ご連絡ありがとうございました。
ではでは！

[6] Posted by yujiro : September 28, 2007 2:42 PM

yujiroさま。こんにちわ。いつもお世話になっております。
また初歩的な質問で申し訳ないのですが・・・
どうしてもうまくいかないのでご指導を宜しくお願い致します。
ツリー化する事が出来たのですが、ツリーを表示するための画像が
文字に乗ってしまうのにはスタイルシートの何処を変更したら
良いのでしょうか？
お忙しいとは思いますが、宜しくお願い致します。

[7] Posted by アプル

: October 23, 2007 12:55 AM

＞アプルさん
こんにちは。
ご質問の件ですが、下記の赤色部分を修正してください。

ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
　　　　　：

20px 位が丁度いいようです。
それではよろしくお願い致します。

[8] Posted by yujiro

: October 23, 2007 11:05 AM

yujiroさま。こんにちわ。いつもお世話になっております。
ありがとうございました♪yujiroさまの言う通りに
20pxにしたら一発でした。
また宜しくお願い致します。

[9] Posted by アプル

: October 23, 2007 7:59 PM

yujiro様、はじめまして。

いつも拝見させていただいております。

サイドバーに画像を挿入したいのですが
その場合、どうすれば良いのでしょうか？

もしくは小粋空間さんのどのページを参考にすれば良いのでしょうか？

書籍のほうを参考にしたんですが
画像については書かれてなかったので
こちらに書かせていただきました。

[10] Posted by tana : December 15, 2007 2:47 AM

＞tanaさん
はじめまして。
ご質問の件ですが、画像を挿入するのは、5-4の手順4～手順6で可能だと思います
（P174のコーヒーカップがそうです）。

画像にリンクを設定しない場合は、手順4のa要素を削除して、dd要素とimg要素だけにしてください。また、width属性とheight属性は削除するか、画像のサイズにあわせて修正してください。

どの程度ご理解頂けているかわからないので、上記の説明でお分かりでなければ再度ご連絡ください。
それではよろしくお願い致します。

[11] Posted by yujiro

: December 15, 2007 8:54 PM

こんばんは。

お世話になります。

このカスタマイズを行いたいのですが、折りたたみの三角マーク（▼）が??になってしまいます。その??でも折りたためるのですが、どのようにすれば三角マークが表示されるのでしょうか？
以前にこのカスタマイズを行ったことがありますが、その時はノーミスで表示されました。今回はどうやってもうまくいきません。
申し訳ありませんが、手順を教えて頂けますか？
よろしくお願い致します。

[12] Posted by たけたけ

: January 13, 2008 3:40 AM

＞たけたけさん
こんばんは。
ご質問の件ですが、原因はブログの文字コードと、menufolder.js の文字コードが一致していないためです。
対処は、ヘッダにある

<script type="text/javascript" src="http://www.syumi-beya.com/two_wheels_plus/blog/menufolder.js"></script>

にcharset属性を付与して、

<script type="text/javascript" src="http://www.syumi-beya.com/two_wheels_plus/blog/menufolder.js" charset="shift_jis"></script>

に変更すれば直ります。
それではよろしくお願い致します。

[13] Posted by yujiro

: January 16, 2008 9:49 PM

こんばんは。
お忙しい中、ご返答頂きましてありがとうございました。ちゃんと表示されました。
文字コードをutf-8で記入しましたが表示されず、散々悩みまして助け舟をお願いしました。
こんな凡ミスで申し訳ありません。今更ながら、もう少し考えればと思っています。
ありがとうございました。またよろしくお願い致します。

[14] Posted by たけたけ

: January 17, 2008 1:41 AM

＞たけたけさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
ではでは！

[15] Posted by yujiro

: January 18, 2008 11:36 PM

こんばんは。
度々で申し訳ありません。カテゴリーリストで気になる所がありましたので、再度質問させて下さい。
カテゴリーリストにある項目（カテゴリー名）を選択すると、1ページの中にその選択したカテゴリーに属するエントリーが全て表示されると思っていたのですが（Ver.3.3では表示されていたと思いますが）、ブログの設定で入力した数のエントリーしか表示されません。（ちなみに私のブログはページ分割のカスタマイズはしていません。）
新たに公開テンプレート（カスタマイズ無し）で保存してみましたが、やはりカテゴリー内の全エントリーは表示されませんでした。
対策方法があるかと過去のコメントを頑張って目を通してみましたが、探しきれませんでした。
度々の質問で申し訳ありませんが、ご教授頂きたく、よろしくお願い致します。

[16] Posted by たけたけ

: January 20, 2008 10:42 PM

＞たけたけさん
こんにちは。
ご質問の件につきましては本日「Movable Type 4 のカテゴリーアーカイブで全てのブログ記事を表示する」
をエントリー致しましたので、参考になれば幸いです。
それではよろしくお願い致します。

[17] Posted by yujiro

: January 22, 2008 12:51 PM

こんばんは。
「Movable Type 4 のカテゴリーアーカイブで全てのブログ記事を表示する」のエントリーにコメントを書かせて頂きました。

[18] Posted by たけたけ

: January 23, 2008 1:09 AM

はじめまして。

小粋空間のサイト、よく利用させて頂いております。
（本も購入してしまいました・・・）

色々と調べてきましたが、どうしてもサブカテゴリーのツリー化だけは出来ないので
質問させてください。

こちらの通りに、作業を行いましたが、何も変化がございません。
作業を行ったのは、以下となります。
どの点が異なるのか、お手すきの際にでもご返答いただけると助かります。

----------------------------------------------------------------------------
３．スクリプトのアップロード
　　メインページと同じディレクトリ、以下ＵＲＬにＵＰしました。
　　http://figureskating.main.jp/blog/

４．テンプレートに script 要素追加
　　＜/head>のまえにいれました。

５．テンプレートにサブカテゴリーリスト表示用タグを追加
　　メインページの「index.html」に、ＭＴの管理画面から入れました。

６．CSS追加
　　ＭＴの管理画面から、スタイルシートの「styles.css：」に入れました。

８．画像のアップロード
　　メインページと同じディレクトリ、以下ＵＲＬにＵＰしました。
　　http://figureskating.main.jp/blog/

----------------------------------------------------------------------------
恐らく、4．、5．あたりの作業が違うのかなと思いますが・・・。

大変お手数おかけ致しますが、アドバイスなど頂ければ幸いです。
よろしくお願いいたします。

[19] Posted by kaikai : February 23, 2008 8:57 PM

＞kaikaiさん
こんばんは。
ご返事遅くなり申し訳ありません。
拙著お買い上げくださりありがとうございます。
ご質問の件につきまして、現在dTreeを設定されているようですが、どちらで動作確認した方がよろしいでしょうか。ご連絡頂ければ幸いです。
それではよろしくお願い致します。

[20] Posted by yujiro

: February 27, 2008 12:21 AM

こんにちは！
kaikaiさんと同様に実装できなくて悩んでおります。
サイトはMT4.1でくんでおり、koikikukanのテンプレートを使わせてもらっています。テスト環境で実験していますので、ソース等は見ていただくことができなくてすみません。

４．テンプレートに script 要素追加
　　＜/head>のまえにいれました。

５．テンプレートにサブカテゴリーリスト表示用タグを追加
　　メインページの「index.html」に、ＭＴの管理画面から入れました。

６．CSS追加
　　ＭＴの管理画面から、スタイルシートの「styles.css：」に入れました。

4＆5のテンプレートとおっしゃっているのは、
template_4_1_utf8_1_2_style
のテンプレートではどのファイルを指しているのでしょうか？

また、ファイルの変更はMTの管理ツールで行うものでしょうか？それとも、エディタで書き換えるのでしょうか？MT初心者でよくわかっていなくてすみません。

お教えいただければ幸いです。

K26

[21] Posted by K26

: March 31, 2008 6:35 PM

yujiro-san

3/31に質問した内容の中で下記を特にお教えいただければうれしいです。

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

MT4.1をインストールしているのですが、「サイドバー」テンプレートモジュールのソースには、タグが見当たらないのですが、yujiroさんのおっしゃっている「各テンプレート」とは具体的にどれなのでしょうか？

[22] Posted by K26

: April 4, 2008 10:17 AM

＞K26さん
こんにちは。
ご返事遅くなり申し訳ありません。
とりあえず[22]のコメントのみ回答致しますと、この記事はMT3の時の内容で、MT3では各テンプレートに head 要素がありました。
MT4ではテンプレートモジュールの「ヘッダー」にしかありませんので、「各テンプレート」は「ヘッダー」に読み替えてください。

なお、このブログで2007年前半以前の記事は、すべてMT3向けの内容になっています。一部MT4向けに新しく記事を書き直していますが、すべての対応はできておりませんので、その際は投稿日を確認して、過去の記事であれば上記のように読み替えてください（MT4向けは記事タイトルまたは記事本文にその旨記しているつもりです）。
それではよろしくお願い致します。

[23] Posted by yujiro

: April 4, 2008 4:10 PM

Yujiro様

コメントありがとうございました。
出張が重なり、やっとサイトを見れています。
早速試してみます。

[24] Posted by K26

: April 14, 2008 11:48 AM

Yujiro様

レスが大変遅くなりましたが、お答えいただきありがとうございました。
早速試してみます。

[25] Posted by K26

: April 14, 2008 3:41 PM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site