年別アーカイブを利用した月別アーカイブの年別表示

年別アーカイブを利用した月別アーカイブの年別表示

Posted at September 14,2008 2:55 AM
Tag:[Customize, Monthly, MovableType, Yearly]

Movable Type の年別アーカイブを利用した「月別アーカイブの年別表示」を紹介します。

月別アーカイブの年別表示

当ブログで紹介してきた「月別アーカイブの年別表示」では月別アーカイブ(とプラグイン)を利用したものに執着していましたが、年別アーカイブと月別アーカイブを組み合わせれば同様の表示が実現できます。

この方法のメリットは、プラグインを利用する必要がないことですが、デメリットとして、アーカイブテンプレートに対して、年別アーカイブのアーカイブマッピングの追加が必要です。年別アーカイブをアーカイブページとして使用しない場合は、再構築オプションの「公開」を手動にしておくと良いでしょう。

月別アーカイブの年別表示

1.基本形

次のサブテンプレートをサイドバーまたはウィジェットとして作成します。ここでは配布テンプレート用にアレンジしています。

MTArchiveList タグを入れ子にすることで、外側の MTArchiveList タグは年表示、内側の MTArchiveList タグは外側の MTArchiveList タグのコンテキストとなるため、特定の月のみを表示します。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
    <mt:archiveListHeader>
  <ul>
    </mt:archiveListHeader>
    <li><mt:archiveTitle />
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
      <ul>
      </mt:archiveListHeader>
        <li><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
      </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
    </li>
    <mt:archiveListFooter>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

2.ツリー化 + 折りたたみ

1項のサブテンプレートにツリー化用の class 属性と年別用折りたたみのマークアップを追加したものです。

下記のサブテンプレートは「JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ」と組み合わせてお使いください。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
  <div id="archive<mt:archiveDate format="%Y" />name">
    <span><mt:archiveTitle /></span>
  </div>
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
  <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      </mt:archiveListHeader>
    <li class="tree<mt:archiveListFooter>_end</mt:archiveListFooter>"><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
  </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
  </mt:archiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<mt:archiveList archive_type="Yearly">
FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
</mt:archiveList>
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

3.参考・関連記事

この記事は下記のサイトを参考にさせていただきました。ありがとうございました。

4.その他

余談ですが、「Movable Type 4.2 パーフェクトガイド」では、プラグインや年別アーカイブを使わずに、「月別アーカイブの年別表示」を実現するカスタマイズを豊富に紹介しています。

Movable Type 4.2 パーフェクトガイドMovable Type 4.2 パーフェクトガイド
荒木 勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 7256

Amazonで詳しく見る
by G-Tools
関連記事
zenback
人気エントリー
トラックバックURL


コメント

いつもお世話になってます!

素人がカスタムしすぎてどこが問題なのか解らなくなってしまったので
助けてやってください(涙)←オバカ

月別をクリックしてみると、コンテナのボーダーが消える月があるんです。
ヘッダー下のボーダーと多分ですがフッタのボーダーは消えてないんですが
その他部分は(サイドバーとコンテンツ部分、ヘッダーの両サイド)消えてるんです。

IE7では全て正常に見えてるのですが、FireFox3だとランダムで消えてしまう様で
キャッシュクリアや再構築をしてみたものの、問題があった月が見えるようになっても
今度は他の月で消えてしまう現象が起こってるのですが・・・

JAVAスクリプトの問題なのでしょうか?
はたまたスタイルシートとか、テンプレート上の問題なのでしょうか?

最近FireFoxを利用しているとJAVAスクリプトエラーみたいなものが出てることがあるので
もしかして自分のブラウザ上の問題なのかな?とも考えているのですが・・・。

yujiro様だったらどこがおかしいとお考えになりますでしょうか?
お忙しいとは思いますが、ご教授頂ければ幸いです。
宜しくお願い致します。

[1] Posted by RiCO : December 15, 2008 7:31 PM

>RiCOさん
こんにちは。
ご質問の件ですが、文言だけでは原因が分からないため、サイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro logo : December 16, 2008 9:47 AM

やっぱり直らないみたいなので・・・お願いします。

自分が見れないのは2008年11月と6月の部分が見えないです。
多分それ以外でも見えない時があるんだと思いますが・・・
一体どこをいじればいいんでしょう??

お手隙の際に宜しくお願いします。

[3] Posted by RiCO : December 19, 2008 7:34 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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