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

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

Posted at February 18,2007 1:03 AM
Tag:[Category, MovableType, Tree]

サブカテゴリーリストの折りたたみ(デフォルトテンプレート版)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向けの記事である旨を追記しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

サブカテゴリーリストの折りたたみの設置 from 株式トレードがメインかな・・・
またまた、小粋空間さんで紹介されている「サブカテゴリーリストの折りたたみ」をメイ... [続きを読む]

Tracked on July 25, 2007 11:35 AM

サブカテゴリーリストの折りたたみを設置させていただきました from 株式トレードがメインかな・・・
またまた、小粋空間さんで紹介されている「サブカテゴリーリストの折りたたみ」をメイ... [続きを読む]

Tracked on July 25, 2007 11:38 AM
コメント

先日MTをDLした超初心者なんですけどもこのツリーのサブカテゴリを利用したくチャレンジしているのですが、うまくいきません。
私が操作した箇所を記入しますので宜しくご指導くださいませ。
1.スクリプトをDLしMTホルダにアップロードしました。
2.テンプレートにスクリプトを追加(エントリーおよびカテゴリーアーカイブに追加しました。)
3.カテゴリーアーカイブテンプレートにサブカテゴリー表示用タグを追加
4.スタイルシートを追加
5.画像をDL(名前の変更)

そこでスクリプトを追加するのは、上記に記入しましたがエントリーおよびカテゴリーアーカイブの2箇所のテンプレートでいいのでしょうか?


宜しくご指導ください。

[1] Posted by katumi : June 23, 2007 6:22 PM

たびたびすいません。
なんとか完成しそうなんですけどもツリーの中のフォントサイズは、どの部分で変更すれば良いのかお手数ですが、ご指導ください。
宜しくお願いします。

[2] Posted by katumi : June 24, 2007 1:31 AM

すいません。
今までの質問をまとめさせていただきます。
1.テンプレートのインデックスページのアーカイブもカテゴリー表示リストのタグを追加しないといけないのでしょうか?
2.ツリーの中のフォントサイズは、どの部分で変更すれば良いのでしょうか?
3.カテゴリーごとの件数が表示されないのですが、どうすればよいでしょう?

宜しくお願いいたします。

[3] Posted by katumi : June 24, 2007 10:36 AM

>katumiさん
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、

1.YESです。
2.下記のセレクタをスタイルシートに追加してください。font-size の値を変更すればリスト内のフォントサイズを変更できます。

#categories {
    font-size: 20px;
}

3.カテゴリーに属するエントリーが公開されていますでしょうか?(0件というのは表示されません)

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

[4] Posted by yujiro : June 25, 2007 2:24 PM

こんばんは。
早速のお返事ありがとうございます。
ご指導のようにスタイルシートに追加しましたら文字サイズの変更ができました。
ほんまにありがとうございます。

それとエントリー数の表示の件ですが、やはりカテゴリーに属するエントリーをしていても表示されません。というかカテゴリ名の後ろの白地の部分をクリック(件数が表示される部分)をマウスでクリックしている時だけ表示されます。
URLを勝手ながらメールにて送らせて頂きますのでご確認お願いします。
お手数ですが、宜しくお願いします。

[5] Posted by katumi : June 25, 2007 10:18 PM

お忙しい中すんません。先日メールに現象の出ているページのURLを送りましたが
届いていますか?届いていればよろしくお願い致します。

[6] Posted by katumi : June 27, 2007 7:08 AM

>katumiさん
こんにちは。
ご返事遅くなり申し訳ありません。
ご質問の件につきまして、先ほどサイトを拝見させて頂いたところ、アクセスできませんでしたが、おそらくスタイルシートのカラムレイアウト部分に

color: #ffffff;

という設定があるのが原因ですので、この設定を削除してください。

なお、左サイドバーのコメントをご覧頂ければお分かりと思いますが、大勢の方からコメントを頂いており、コメント内容や私自身の時間の都合により、リアルタイムにご返事できない場合が多々あります。コメント投稿時のメッセージにもあります通り、ご返答には数日以上お待ち頂くことがありますので、その点はご理解ください。
それではよろしくお願い致します。

[7] Posted by yujiro : June 27, 2007 3:47 PM

こんばんは。
どうもありがとうございます。
ご指導のように設定すると件数も表示されました。
気長に待つことにいたしますのでまた、ご指導宜しくお願いいたします。

[8] Posted by katumi : June 27, 2007 11:50 PM

いつも参考にしております。ありがとうございます。
こちらの『サブカテゴリーリストの折りたたみ』を利用させていただいています。

vistaのIEでみるとカテゴリリストの表示がおかしくなってしまいます。
vistaでもファイアーフォックスですと表示されます。
XPだとIEもファイアーフォックスも両方とも綺麗に表示されます。

どのような処理をすればちゃんと表示されますか??
ヨロシクお願いします

[9] Posted by : May 25, 2008 8:17 PM

スミマセン。解決いたしました。
お忙しい中、申し訳ございません。。。

[10] Posted by : May 28, 2008 6:14 PM

>花さん
こんにちは。
ご返事遅くなってすいません。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[11] Posted by yujiro logo : June 10, 2008 3:11 PM

小粋空間殿
 お世話になっております。
 現在、MT3で作ったブログをMT5に作り変えています。
 そこで、色々な箇所を参考に…と言うか、丸々コピーして使わさせてもらっております(感謝)

 …で、この「サブカテゴリーリストの折りたたみ」はMT5でやるにはどうすれば良いのでしょうか?

 ちなみに「月別アーカイブリストの年別表示」は、http://www.koikikukan.com/archives/2009/06/15-000300.php を使って上手く動いています。

 お忙しい所、恐縮ですが、御教授お願い致します。

[12] Posted by すぎむら : April 26, 2010 11:39 PM

>すぎむらさん
こんばんは。
MT5版については別途エントリーしたいと思います。
すいませんが少々お時間ください。

[13] Posted by yujiro logo : May 2, 2010 4:33 AM

お忙しい所、ありがとうございます。
まだMT5版の完成は先になりそうですので、気長に待たせて頂きます。
宜しくお願い致します。

[14] Posted by すぎむら : May 2, 2010 6:34 AM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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