TopMovable Typeカスタマイズカテゴリー > 2006年8月
2006年8月21日

カテゴリー・アーカイブにカテゴリーの月別リストを表示する

August 21,2006 1:10 AM
Tag:[, , ]
Permalink
カテゴリー・アーカイブにカテゴリーの月別リストを表示するカテゴリー・アーカイブに当該カテゴリーのエントリーを月別に表示するカスタマイズを紹介します。
スクリーンショットは当サイトの「Movable Type テンプレート」のカテゴリーの最近3ヶ月分を抜粋して表示したものです。

このカスタマイズは次のサイトで紹介されています。

Chitatopopsアーカイブ系のページでMTMonthHeaderを擬似的に実現

ということで、詳細につきましては上記サイトの「カテゴリーアーカイブで<MTMonthHeader>」下に表示されているリストをご利用ください。

また説明にある通り、MTTagInvokeCompare プラグインが事前に設定されていることが必要です。3.31-ja で利用する場合は MTTagInvoke のコードを修正する必要があります(下記参照)。

Movable Type 3.3 の再構築で「<MTTagName>タグが閉じられていません」になる問題の対処(改)

スクリーンショットのようにツリー表示をするためには、タグに若干の修正を加えます。

  • リストの h3 要素を span 要素に変更
  • タグ全体を div 要素で括り id 属性(名称は任意)を設定
  • ツリー化のカスタマイズを実施する

カテゴリー内で(そのカテゴリーの)エントリーを月別表示をするというテクニックはこれまでなかったと思われます。個人ブログ・ビジネスブログに関わらず色々活用できるのではないでしょうか。

Comments [14] | Trackbacks [1]
2006年8月18日

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

August 18,2006 12:25 AM
Tag:[, , , ]
Permalink

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

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

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

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

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

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

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

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

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

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

サンプル

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

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

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

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

上記のリストを表示する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;
}

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

Comments [13] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
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