Top ＞ Movable Type ＞ カスタマイズ ＞ エントリー ＞ エントリー・アーカイブで親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示
2006年8月18日

エントリー・アーカイブで親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示

Posted at August 18,2006 12:25 AM
Category：[エントリー, カテゴリー]
Tag：[, , , ]

エントリー・アーカイブで、親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示するカスタマイズです。

タイトルから機能を理解して頂くのは困難と思いますので、とりあえずサンプルで説明します。
まず、下記のようなサブカテゴリーリストを仮定します。

　植物
　　├ バラ科
　　│　　├ やまぶき
　　│　　└ ワレモコウ
　　├ ユリ科
　　│　　├ チューリップ
　　│　　└ ヒアシンス
　　└ ラン科
　　　　　├ サギソウ
　　　　　└ カトレア

　昆虫
　　├ コガネムシ科
　　│　　├ カブトムシ
　　│　　└ スジコガネ
　　└ アガハチョウ科
　　　　　├ キアゲハ
　　　　　└ アゲハ

このサブカテゴリーリストは次の規則にもとづいています。

  • メインカテゴリー：「植物」または「昆虫」
  • サブカテゴリー：科目
  • エントリー：科目に属する植物または昆虫の「和名」

この前提で、ブラウザに表示するエントリー・アーカイブが「チューリップ」である場合、エントリー・アーカイブには親カテゴリー（植物）が属するすべてのエントリーをサブカテゴリー別に表示、つまり、

　植物
　　├ バラ科
　　│　　├ やまぶき
　　│　　└ ワレモコウ
　　├ ユリ科
　　│　　├ チューリップ
　　│　　└ ヒアシンス
　　└ ラン科
　　　　　├ サギソウ
　　　　　└ カトレア

を表示するというものです。

以下に、公開テンプレートを使ったサンプルを作ってみました。

サンプル

エントリー・アーカイブの左上に表示されている「親カテゴリーに属する全カテゴリー」が今回紹介するリストです。

エントリー・アーカイブに同一カテゴリーのエントリーを表示する方法は「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」で紹介している通り、よく知られているテクニックですが、エントリーをカテゴリー別に表示したり、同じ親カテゴリーのエントリーを表示する方法は知られていません。

ただしこのカスタマイズには下記の制約があります。

  • 親カテゴリー（「植物」や「昆虫」）にエントリーが存在しないこと。
  • サブカテゴリーの下にサブカテゴリーが存在しない（「バラ科」の下に「サクラ属」というサブカテゴリーが存在しない）こと。

上記のリストを表示するMTタグです。

<MTParentCategory><MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
<MTEntries><MTEntriesHeader><ul></MTEntriesHeader><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li><MTEntriesFooter></ul></MTEntriesFooter></MTEntries><MTElse><li><$MTCategoryLabel$></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth="3"></li><MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories></MTParentCategory>

ツリー化するには、maketree.js を利用して、下記の青色部分を追加します。

<div class="side">
<div id="parentCategoryEntries">
<MTParentCategory><MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
<MTEntries><MTEntriesHeader><ul></MTEntriesHeader><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li><MTEntriesFooter></ul></MTEntriesFooter></MTEntries><MTElse><li><$MTCategoryLabel$></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth="3"></li><MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories></MTParentCategory>
</div>
</div>
 
<script type="text/javascript">
generateTreeForTreeStructure('parentCategoryEntries');
</script>

CSSは下記です。

ul.tree {
    margin: 0px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin-left: 10px;
    padding: 0!important;
}
ul.tree li {
    margin: 0;
    padding: 0;
    background: none;
    list-style: none!important;
}
ul.tree li ul li {
    margin: 0 0 0 10px;
    padding-left: 13px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li ul li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

このカスタマイズはカテゴリー・アーカイブに適用した場合も同様の動作をします。

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


トラックバック

≫ MovableTypeでYouTubeの動画を簡単にUPする方法 from nogute.com
YouTubeの動画をBlogで良く見かけるようになりました。 興味ある動画は自... [続きを読む]

Tracked on January 22, 2007 7:39 PM
コメント

こんにちわ、いつも参考にさせて頂いております。

サブカテゴリーについてご質問させて頂きたく思います。

環境はmovabletype4.01になります。


現在アーカイブテンプレートを新規に作り、カテゴリーページ（親カテゴリーの先のページ)を作成しているのですが、そのカテゴリーページに、定義リストを使い、下記の様にサブタイトルとサブタイトルに属するエントリーの一覧を表示したいのです。


--------------------------------------------------------------------------------
親カテゴリー１のページ とします。　↓↓↓
--------------------------------------------------------------------------------

【サブカテゴリー①のタイトル(親カテゴリー１に属する)】
サブカテゴリー①に属するエントリータイトルⅠ
サブカテゴリー①に属するエントリータイトルⅡ
サブカテゴリー①に属するエントリータイトルⅢ
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・

【サブカテゴリー②のタイトル(親カテゴリー１に属する)】
サブカテゴリー①に属するエントリータイトルⅠ
サブカテゴリー①に属するエントリータイトルⅡ
サブカテゴリー①に属するエントリータイトルⅢ
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・

※エントリータイトルは全てリンクするつもりです。

-------------------------------------------------------------------------------

基本となるＸＨＴＭＬは下記のような感じでいこうと思っています。

<div class="date-news-waku">

　<div><!-- 左枠 -->
　<img src="左枠のイメージ画像.jpg" width="65" height="60" />
　</div>

　<div><!-- 右枠 -->
　　<dl>
　　　<dt>サブカテゴリー１タイトル</dt>
　　　<dd>サブカテゴリー１の記事Ⅰ</dd>
　　　<dd>サブカテゴリー１の記事Ⅱ</dd>
　　　<dd>サブカテゴリー１の記事Ⅲ</dd>
　　</dl>
　</div>

</div>

----------------------------------------------------------------------------------

以上になります。

ちなみに、エントリー(記事)は全てサブカテゴリーのどれかに属させる予定です。


お忙しい中申し訳ございませんが、ご指導ご鞭撻宜しくお願い致します。

[1] Posted by peko : December 1, 2007 5:14 PM

＞pekoさん
こんばんは。
ご質問の件で確認ですが、何点か確認させてください。

１．親カテゴリーにはエントリーはありますでしょうか。
親カテゴリーにエントリーがない場合、その親カテゴリーのページが存在しないので、親カテゴリーにダミーのエントリーを作成する必要があります。

２．上のご要望で、「サブカテゴリー②のタイトル」の下に「サブカテゴリー①に属する～」とありますが、①は正しくは②でしょうか。

３．サブカテゴリーの階層は2階層、つまり

　　親カテゴリー - サブカテゴリー

であって、

　　親カテゴリー - サブカテゴリー - サブカテゴリー

という3階層はないという認識でよろしいでしょうか。

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

[2] Posted by yujiro Author Profile Page : December 2, 2007 10:01 PM

yujiroさん＞

ご返信ありがとうございます。

１、　今の所、またこれからも全てサブカテゴリーに割り振りしていく予定です。※今あるエントリーは全てサブカテゴリーに属しています。　（親カテゴリー>>サブカテゴリー という感じです。）
ダミーのエントリーはどんな記事でも大丈夫でしょうか？

２、申し訳ないです！yujiroさんのおっしゃるとおり、正しくは２です！

３、はい。サブカテゴリーの階層は全て２階層（目）でいきます。３階層には各エントリーという風にしようと思います。

わかりにくくて申し訳ございません。。

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

[3] Posted by peko : December 2, 2007 11:59 PM

※すみません、追記させてください。

今の所、親カテゴリーには、どのエントリー属させないつもりですが、
今後、属させる記事も出てくるかもしれません。

それでは、ご指導ご鞭撻お願いいたします。

[4] Posted by peko : December 4, 2007 1:29 PM

＞pekoさん
こんにちは。
ご連絡ありがとうございます。
ちなみに、親カテゴリーにダミー（空）のエントリーを投稿した場合、親カテゴリーのページ本文は空白になります（サイドバーにご要望のリストは表示されます）が大丈夫でしょうか。
それではよろしくお願い致します。

[5] Posted by yujiro Author Profile Page : December 4, 2007 2:22 PM

yujiro様
お忙しい中返信ありがとうございます。親カテゴリーのページ本文が空白になってしまうとの事ですが、下記のようにする上で問題はありますか？

（私の場合ですが）左１６０pxを親カテゴリーリストとして表示し、それより右側をメインコンテンツにしようと考えているのですが、そのメインコンテンツの部分に今回お願いしていますリストを表示したいと思っています。

※具体的には下記のようなサイトをイメージしています

http://www.mdn.co.jp/content/blank/17/35/

第◯回と表示されているのがサブカテゴリーで、
その下の第◯話というのが、そのサブカテゴリーに属するエントリーというような感じです。

すみませんが宜しくお願い致します。

※まだまだ未熟な私が考えてやっておりますので、もしこのやり方をするよりも他に良い方法がありましたら是非ご指導宜しくお願い致します。

[6] Posted by peko : December 4, 2007 11:26 PM

＞pekoさん
こんにちは。
ご連絡遅くなってすいません。
下記のタグでお試し頂けますでしょうか。

<MTTopLevelCategories>
<MTSubCatIsFirst><dl></MTSubCatIsFirst>
   <MTIfNonZero tag="MTCategoryCount">
   <dt><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a></dt>
     <MTEntries><dd><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></dd></MTEntries>
   <MTElse>
   <dt><MTCategoryLabel></dt>
   </MTElse>
   </MTIfNonZero>
   <MTSubCatsRecurse>
<MTSubCatIsLast></dl></MTSubCatIsLast>
</MTTopLevelCategories>

div 要素は付与していないので、このタグの外側に付与してください。
それではよろしくお願い致します。

[7] Posted by yujiro Author Profile Page : December 12, 2007 3:09 PM

親カテゴリー下のエントリーも表示するようにはできないでしょうか？

[8] Posted by 　 : February 21, 2008 7:50 PM

自己解決しました。失礼しました。

[9] Posted by 8 : February 23, 2008 10:19 AM

＞8さん
こんばんは。
ご返事おそくなりすいません。
ご質問の件、自己解決されたようで良かったです。
できれば解決された内容をコメントでご連絡頂けないでしょうか。
それではよろしくお願い致します。

[10] Posted by yujiro Author Profile Page : February 24, 2008 1:08 AM
コメントする

*必須



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

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entry Trackbacks
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by：FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!