小粋空間: サブカテゴリーリストのエクスプローラ風折りたたみ

Top ＞ Movable Type ＞カスタマイズ＞カテゴリー＞サブカテゴリーリストのエクスプローラ風折りたたみ

News

各種ブログテンプレート

2007年3月 6日

エントリー本文

サブカテゴリーリストのエクスプローラ風折りたたみ

Posted at March 6,2007 1:36 AM
Category：[カテゴリー]
Tag：[Category, MovableType]

サブカテゴリーリストのエクスプローラー式折りたたみ当サイトでこれまで紹介してきた「サブカテゴリーリストの折りたたみ」カスタマイズは、「折りたたみマーク（＋ツリー化）」という形式が主体でしたが、新たに Windows のエクスプローラのツリー表示と同じように、タイトルの左側に折りたたみ画像を表示し、折りたたみ状態によって画像を切り替えられるカスタマイズを紹介致します。

ここでは、Movable Type のデフォルトテンプレート（スクリーンショット）および公開テンプレートでのカスタマイズ方法について説明します。

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

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

download

２．menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記のように該当部分を青色の内容に変更してください。

// サブカテゴリー用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSubCategories  = '<img src="close.png" style="border:none;vertical-align:middle;" />';
var closeMarkForSubCategories = '<img src="open.png" style="border:none;vertical-align:middle;" />';
 
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = true;
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

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

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

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

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

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

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

デフォルトテンプレートの場合は５．１項、公開テンプレートの場合は５．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１公開テンプレート

<div class="sidetitle">
Categories
</div>
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><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$>','off',false);</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２デフォルトテンプレート

<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>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

６．スタイルシート変更

デフォルトテンプレートの場合は６．１項、公開テンプレートの場合は６．２項の CSS をスタイルシートに追加してください。

６．１デフォルトテンプレート

#categories ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
#categories ul li {
    padding-left: 15px;
}
div .subcategories {
    margin-left: -15px;
}

６．２公開テンプレート

#categories ul {
    margin: 0 0 0 2px;
    padding: 0;
    list-style: none;
}
#categories ul li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
#categories li li {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
div .subcategories {
    margin-left: -15px;
}

公開テンプレートの場合は、すでに設定されている下記の CSS を削除してください。

.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: circle;
}

７．画像のアップロード

下記の折りたたみマーク画像をダウンロード（Windows であれば右クリックして「名前を付けて画像を保存」を選択）し、メインページと同じディレクトリにアップロードしてください。

画像はお好みのものをご利用ください。

Posted by yujiro ReTweet This!

« Slider によるフォントサイズ変更でアクセシビリティを向上させる | Main | 追記文章の折りたたみ（閉じた時にページトップに戻る方法） »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

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

トラックバック

≫ ブログの細かなナビゲーションを改善＆アップグレード！【Movable Typeカスタマイズ】 from shoe-g.com 植山周志のぶっ飛びブログ
このブログをちょっと使いやすく、見やすくしようと細かなところをいくつか変更してみ... [続きを読む]

Tracked on March 2, 2010 4:28 PM

★こんばんは、初めまして★

わからないことが多いので、いつも参考にさせていただいております。
お陰様で、いろいろと助かってます。
ありがとうございます（＾ω＾）

ちょっとわからないことがあるので、質問よろしいでしょうか？
今、仕事でサブカテゴリーを作成しているんです。
上の図の様に作成したいのですが、どのようにすれば、開いた項目を右にインデント？することができるのでしょうか？

説明が下手ですみません（＞＜。）

[1] Posted by ともん : March 28, 2007 3:33 AM

＞ともんさん
こんばんは。
いつもご利用ありがとうございます。

ご質問の件ですが、冒頭のスクリーンショットを例にすると、６．１項の

#categories ul li {
    padding-left: 15px;
}

の部分が右にインデントさせている部分になります。ご質問の解釈が違っておりましたら再度ご質問ください。
それではよろしくお願い致します。

[2] Posted by yujiro : April 1, 2007 1:40 AM

こんにちは。

ゆっくりで結構ですのでよろしければ教えていただきたく。

当方のブログでこのエクスプローラ風折りたたみとツリー化を併用しているのでが、
サブカテゴリーの有るカテゴリー名と無いカテゴリー名の左端の位置を合わせたいのですがどうしたらよいでしょうか？

現在はここで紹介されているCSSは追加せず、ツリー化で紹介されているCSSのみを使うと、
サブカテゴリーの有るカテゴリーの折りたたみマークと、サブカテゴリーの無いカテゴリー名の左端が合うのでとりあえず良いかな、という状態です。

きれいに位置を揃えられたら格好よいのではないかと思いあれこれいじってみたのですが挫折しました・・・

[3] Posted by サラリーマン : April 29, 2007 10:11 PM

＞サラリーマンさん
こんばんは。
ご質問の件ですが、現在スタイルシートに設定されている100行目辺りの設定を下記の設定に置き換えてみてください。

#categories ul {
    margin: 0 0 0 2px;
    padding: 0;
    list-style: none;
}
#categories ul li {
    margin: 2px 0 2px 5px;
    padding-left: 32px;
    list-style: none;
}
#categories li li {
    margin: 2px 0 2px 5px;
    padding-left: 17px;
    list-style: none;
}
div .subcategories {
    margin-left: -13px;
}
ul.tree li {
    background-image: url("http://woresite.jp/material/tree_lst_dotted.gif");
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.end {
    background-image: url("http://woresite.jp/material/tree_end_dotted.gif");
    list-style: none;
}

また、元から設定されている360行目辺りの下のCSSは必ず削除してください。

/* サイドメニュー(サブカテゴリー用) */
.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}

それではよろしくお願い致します。

[4] Posted by yujiro : April 30, 2007 9:57 PM

こんばんは。

素晴しく早い回答ありがとうございます。
ビッタリ合いました！

360行付近を削除してなかったのは痛かったですね。。。

他のツリー化したサイドメニューとの兼ね合いが難しそうですが、
おかげさまでヒントを得ることができました。
ちょっと悪戦苦闘してみます。

[5] Posted by サラリーマン : April 30, 2007 11:41 PM

＞サラリーマンさん
こんばんは。
ご連絡ありがとうございます。
他のツリー画像との干渉がもれてましたね、すいません。
セレクタ名を変更して色々お試しになってください。
ではでは！

[6] Posted by yujiro : May 3, 2007 2:24 AM

　yujiro 　様
　ご厚意に甘えてこちらでもお世話になります。

　サブカテゴリーリストのエクスプローラ風折りたたみを使わせていただきます。

　ｈｏｍｅとアーカイブページでは（＋）（?）のマークが出るのですが、
　それ以外では（×）マークが出ます。正しく（＋）（?）のマークが出るようにするにはどうしたらいいのでしょうか。

　お手透きのときにお教えいただけないでしょうか。

[7] Posted by taiyoo : June 25, 2007 12:37 PM

＞taiyooさん
こんにちは。
ご質問の件ですが、２項の

var openMarkForSubCategories  = '<img src="close.png" style="border:none;vertical-align:middle;" />';
var closeMarkForSubCategories = '<img src="open.png" style="border:none;vertical-align:middle;" />';

の赤色部分を

var openMarkForSubCategories  = '<img src="http://www.propatent.jp/cgi-bin/close.png" style="border:none;vertical-align:middle;" />
var closeMarkForSubCategories = '<img src="http://www.propatent.jp/cgi-bin/open.png" style="border:none;vertical-align:middle;" />';

にしてみてください。
それではよろしくお願い致します。

[8] Posted by yujiro : June 25, 2007 2:59 PM

yujiro　様

　大変ありがとうございました。ご厚意に甘えて気持ちよく使わせていただきます。
　また、何かありましたら、相談させて下さい。

[9] Posted by taiyoo : June 25, 2007 4:12 PM

　大変お世話になっております。親カテゴリの中にファイルを一つだけ入れると、サブカテゴリーに何件のファイルが含まれていても、親カテゴリー中のファイル数は１と表示されます。折りたたんだ状態でこれを見ると、どうも誤解を招きそうな感じがします。
　親カテゴリにファイルが一件だけ入っている場合、親カテゴリのファイル数は１という表示を抹消するにはどうしたらいいか、お教え願えませんか。

[10] Posted by taiyoo : July 3, 2007 1:15 PM

　お世話になります。もう一つです。うるさい問い合わせで申し訳ないと思っています。

　2007/03/06-013608.php#c11044のこのページで、ｉｍｅｇｅで表示してあるサンプルでは、カテゴリーの先頭に、リスト表示用の○記号がありません。しかし、ダウンロードして作成した表示では○記号がついています。
　○記号が付くと、その分でカテゴリの文字記載が窮屈になります。このページのｉｍｅｇｅ画像のように表示先頭の○記号を削除する方法があれば、教えてください。

[11] Posted by taiyoo : July 4, 2007 11:00 AM

＞taiyooさん
こんにちは。
2つめのご質問の件ですが、CSSを下記に置き換えてみてください。

#categories ul.module-list {
    margin: 0 0 0 2px;
    padding: 0;
    list-style: none;
}
#categories ul.module-list li.module-list-item {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
#categories li.module-list-item li.module-list-item {
    margin: 2px 0 2px 5px;
    padding-left: 10px;
    list-style: none;
}
div .subcategories {
    margin-left: -15px;
}

また一つ目の質問ですが、1件の時だけ非表示にするのは困難です。
それではよろしくお願い致します。

[12] Posted by yujiro : July 11, 2007 4:10 PM

　大変ありがとうございました。お陰でカテゴリーの表示に余裕が出るようになりました。助かりました。

　ところで親カテゴリーの件ですが、1件の時だけ非表示にするのは困難ということはわかりました。

　読み直してみて、Ｎｏ１０の記載は確かに誤解を招くような記載でした。失礼しました。親カテゴリー欄の末尾には数字の表示が全くでないようにする方法はないものでしょうかと、そういうご相談をさせていただいていたつもりでおりました。

　お忙しい折、ご無理なご相談をするつもりはありませんので、お手透きの時、１月後でも、２月後でもお考えいただければ幸いです。
　もし、数字表示を消すことが無理であれば、これはこのまま喜んで使用させて頂きます。

　ありがとうございました。

[13] Posted by taiyoo : July 12, 2007 1:39 PM

＞taiyooさん
こんばんは。
それであれば、タグの中にある

[<$MTCategoryCount$>]

の部分を

<MTHasParentCategory>[<$MTCategoryCount$>]</MTHasParentCategory>

にすれば大丈夫だと思いますのでお試しください。
それではよろしくお願い致します。

[14] Posted by yujiro : July 16, 2007 3:15 AM

　大変ありがとうございました。お陰ですっきりしました。

[15] Posted by taiyoo : July 16, 2007 10:06 AM

はじめまして、いつもお世話になってます。
サイドメニューをエクスプローラ風にしたところ
categoryの記事タイトルだけに小さなリストマーク（？）の●が左に付いてしまうようになりました；
ちゃんと＋－の表示もされていて折りたためるのですが・・・。

どうしたら外せますでしょうか？
初歩的な質問で申し訳ありません。

[16] Posted by うしゃぎ : December 18, 2007 3:00 PM

＞うしゃぎさん
こんばんは。
ご質問の件につきまして、すいませんが不具合が発生しているサイトのURLをご連絡頂けますでしょうか（文言だけでは適切な回答ができませんので…）。
それではよろしくお願い致します。

[17] Posted by yujiro

: December 18, 2007 11:32 PM

あ、貼り忘れてました、ごめんなさい；
まだ途中なのでごちゃごちゃしてたり、色んな意味でごめんなさい･･･；

[18] Posted by うしゃぎ : December 19, 2007 12:54 AM

＞うしゃぎさん
こんばんは。
遅くなって申し訳ありません。
ようやく原因が分かりました。

<div id="categories">

のすぐ下に ul 要素がない（li 要素で始まってしまっている）のが原因です。
記事に掲載しているタグ再度上書きしてお試し頂けますでしょうか。
それではよろしくお願い致します。

[19] Posted by yujiro

: December 29, 2007 11:32 PM

年末でお忙しい中、本当にごめんなさい(;´Д⊂

ええっと、すぐ下というのは

<div class="sidetitle">
Categories
</div>
<div class="side">
<div id="categories">
<ul>
<MTTopLevelCategories>

という風に<div id="categories">の下に<ul>を記述するという事でしょうか？
それとも<div id="categories">の下の最初の<li>の前に<ul>を記述するという事でしょうか？
<div id="categories">の下に<ul>を記述する事で●は消すことができたのですが、文字が小さいままで、左の→と被ってしまっていて上手く表示されないのです；

<ul>か<li>の閉じ忘れが原因なのでしょうか・・・。だとしたら何処なのでしょう；；
色々弄ってはみたのですが、上手く表示されず、お手上げです･･･＿|￣|○
ちなみに小粋さんの公開テンプレートそのままなのですが･･･；；

またまたお手数かけます･･･；；
すぐに回答ください、とは言いませんので＞＜
気長に待ってます。宜しくお願いします。

[20] Posted by うしゃぎ : December 31, 2007 12:40 AM

あぅ･･･タグそのままコピペしちゃいました・・・；
ごめんなさい･･･orz
訂正です↓

<div class="sidetitle">
Categories
</div>
<div class="side">
<div id="categories">
<ul>
<MTTopLevelCategories>

という風に<div id="categories">の下に<ul>を記述するという事でしょうか？
それとも<div id="categories">の下の最初の<li>の前に<ul>を記述するという事でしょうか？
<div id="categories">の下に<ul>を記述する事で●は消すことができたのですが
文字が小さいままで、左の→と被ってしまっていて上手く表示されないのです；

<ul>か<li>の閉じ忘れが原因なのでしょうか・・・。だとしたら何処なのでしょう；；

色々弄ってはみたのですが、上手く表示されず、お手上げです･･･＿|￣|○
ちなみに小粋さんの5.1公開テンプレートそのままなのですが･･･；；

連投失礼しました(´；ω；`)

[21] Posted by うしゃぎ : December 31, 2007 12:57 AM

＞うしゃぎさん
こんばんは。
言葉足らずですいません。
ul要素は手で追加するのではなく、５．１のリストの7行目と16行目にul要素の開始タグと終了タグがあるのですが、それがページに反映されていないようにみえました。それで「記事に掲載しているタグ再度上書きしてお試し頂けますでしょうか。」と申し上げた、というのが経緯です。
なお５．１のリストはご質問を頂いた時に動作を再確認したのですが、一番外側のul要素が欠落しなかったので、コピー誤りか修正されたものと判断致しました。

もし不具合ががなおらないようでしたら、テンプレートをメールの本文に貼り付けてお送りください。
それではよろしくお願い致します。

[22] Posted by yujiro

: December 31, 2007 1:07 AM

コピーし直してもダメでしたのでメールでテンプレートを送りたいのですが
メールは何処から送れば宜しいでしょうか？
メールフォームから送ろうとしたら
「スパムの関係上送れません」という感じの文章が出て送れませんでした；
ごめんなさいー；

[23] Posted by うしゃぎ : December 31, 2007 10:25 PM

＞うしゃぎさん
すいません。
コメントフォームにメールアドレスを入力して再度ご連絡ください。頂いたメールアドレスに私のメールアドレスをご連絡致します。
それではよろしくお願い致します。

[24] Posted by yujiro

: January 1, 2008 3:45 AM

Σあああぁ！その手がありましたねｗ
気づけずにすいません；；
宜しくお願いします＞＜

[25] Posted by うしゃぎ : January 1, 2008 10:30 PM

＞うしゃぎさん
こんばんは。
メールでも回答済ですが、バージョン4.0では一部動作しないタグがありますので、バージョン4.01にアップロード願います。
それではよろしくお願い致します。

[26] Posted by yujiro

: January 5, 2008 2:09 AM

こんにちは
現在、(001)カテゴリー名から、pmHeadChangerを使用して、pmhc=""にてカテゴリーの表示順を制御しています。
カテゴリ数が膨大にあるため、menufolder.jsを導入したいのですが、カテゴリーリストの表示順を制御する方法があれは教えていただきたいのですが。。

よろしくお願いいたします。

[27] Posted by つかりん : January 27, 2008 1:09 PM

＞つかりんさん
こんにちは。
ご質問の件ですが、「カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用）」の利用をおすすめします。
それではよろしくお願い致します。

[28] Posted by yujiro

: January 30, 2008 5:01 PM

「カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用）」
うまく行きました。
有難うございます！！

[29] Posted by つかりん : February 1, 2008 2:36 PM

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

[30] Posted by yujiro

: February 3, 2008 11:42 PM

お手すきのときで結構ですので、教えていただけるでしょうか。

こちらの折りたたみカスタマイズを使わせていただいているのですが、
すべてのカテゴリ一覧ではなく、任意のカテゴリのみ、この表示の仕方で表示させることはできるでしょうか？

[31] Posted by shihorigon : October 2, 2008 12:15 PM

＞shihorigonさん
こんにちは。
ご質問の件ですが、MT4以降をお使いであれば、５項のscript 要素を出力する部分を次のように変更してください（青色部分を追加）。

<script type="text/javascript">
<!--
<$MTSetVar name="category" value="カテゴリー名"$>
<MTTopLevelCategories>
<MTHasSubCategories>
<MTIf tag="CategoryLabel" like="$category">
FoldNavigation('subcategories<$MTCategoryID$>','off',false);
</MTIf>
</MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色で示した「カテゴリー名」に、折りたたみたいカテゴリー名を設定してください。カテゴリー名が複数ある場合は、

　　value="カテゴリー1|カテゴリー2|カテゴリー3"

のようにパイプ（|）で区切ってください。パイプは半角で入力してください。

それではよろしくお願い致します。

[32] Posted by yujiro

: October 3, 2008 1:23 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

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