リスト カスタマイズ vol.9

月別Archiveをリスト化&軽量化

これまでは月別アーカイブは他と同じように長いエントリーは”続きを読む..."を表示させるようにしてましたが、日に何度か投稿してる現状では長くなりすぎるかもしれないのでリスト化させて表示させる様にしました。

Date-Based Archiveテンプレートをイジる訳ですが、大幅に変更するので予めバックアップは取っておきましょう。問題が起きた時に戻せなくなると大変ですから。

バックアップを取ったら月別アーカイブページを生成してる方の<div class="blog">（menuの方は残しててよい）の下の部分のdiv属性の中身を消します。消したら、

<h2 class="date"><MTArchive><$MTArchiveTitle$>のログ</MTArchive></h2>

と記述して何年何月のログか分かるようタイトルを表示させるようにします。

うちではエントリータイトルの背景に画像を使っていて、それを利用したいのでそういう風になるようにしています。またエントリーの概要を表示させるようにもしています。
<$MTEntryExcerpt convert_breaks="1"$>を記述する事で可能です。

以下のコードを記述してスタイルシートを設定すればこのページのようになります。

<div class="blogbody-date">

<MTEntries sort_order="ascend">

<span class="blogbody-datetitle">

<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>

</span><br />

<span class="posted"><span class="accent">┗ </span>

<$MTEntryDate format=" %e "$> 日 

|<MTEntryCategories glue="⇔ ">

<a href="<$MTCategoryArchiveLink$>">

<$MTCategoryLabel$>

</a>

</MTEntryCategories>|<br /></span>

<div class="blogbody-dateexcerpt">

<$MTEntryExcerpt convert_breaks="1"$>

</div>

<br />

</MTEntries>

</div>

という感じになっています。新たにStylesheetテンプレートに.blogbody-date 、
.blogbody-datetitle 、.blogbody-dateexcerptというクラスを作って指定させてます。他の所は、緑で表示してる部分で既存のCSSを読み込ませて対応してますので、その辺は自分の環境に合わせて変更して下さい。
保存、再構築して反映させてあげましょう。

こうする事で前よりも軽くなります。スッキリして分かり易くもなりますしね。

追記：
コメントとトラックバックも表示させるようにしました。
また下部にTOPに戻る為のアンカーポイントも付け足しました。
カテゴリーArchiveをリスト化&軽量化を参照して下さい。