アーカイブ一覧をリスト表示にする２

以前、「アーカイブ一覧をリスト表示にする」でアーカイブページに表示される「本文」と「続きを読む」を削除し、リストのように見せる方法をご紹介しました。

手軽なカスタマイズなので一例として投稿しましたが、このままではアーカイブページを表示した時に、それが何の一覧なのかを知るためにブラウザのタイトルバーを確認する必要があります（デフォルトの仕様）。ページ内に「xxx のアーカイブ」というタイトルが表示されていた方が、分かりやすいですよね。

そこで今回は、アーカイブページにタイトルを追加し、記事一覧を普通のリストとして表示する方法をご紹介します。

尚、このカスタマイズ例では、最低でも記事が新しいのか古いのかぐらいは判別できた方が良いので、記事情報として投稿日のみ記事タイトルの後に表示させています。

今回使用するのは、テンプレート「アーカイブ」と「スタイルシート」のみです。

テンプレート「アーカイブ」に手を加える

以下の部分（<EntrysLoop> から </EntrysLoop> まで）を確認してください。

<EntrysLoop>

<%TrackBackAutoDiscovery%>

<IfDateChanged><h2 class="date"><%EntryDate%></h2><a name="<%EntryDateTag%>""></a></IfDateChanged>

<div class="blogbody">

<a name="<%EntryId%>""></a>

<h3 class="title"><%EntryTitle%></h3>

<div class="main"><%EntryBody%>&nbsp;&nbsp;<IfEntryBodyMore><span class="main-continues"><a class="acontinues" href="<%EntryPermalink%>"">続きを読む</a></span></IfEntryBodyMore></div><br clear="all" />

<div class="posted">Posted by <%EntryAuthor%> at

<a class="aposted" href="<%EntryPermalink%>""><%EntryTime%></a>

<IfEntryAllowComment>│<a class="aposted" href="<%EntryPermalink%>"#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>

<IfEntryAllowPing>│<a class="aposted" href="<%EntryPermalink%>"#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing>

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>""><%EntryCategory%></a></IfEntryCategory>

</div>

</div>

</EntrysLoop>

この中に記事タイトルと記事情報、本文と「続きを読む」を表示するためのソースが入っています。

この部分を、以下のようにします。

<h2 class="title"><%CategoryName%> のアーカイブ</h2>



<div class="main">

<ul class="archive_list">

<!-- Loop Start -->

<EntrysLoop>

<%TrackBackAutoDiscovery%>



<li><a href="<%EntryPermalink%>"" title="<%EntryTitle%>"><%EntryTitle%></a>&nbsp;&nbsp;<span class="small"><%EntryDate%></span></li>



<a name="<%EntryDateTag%>""></a>

<a name="<%EntryId%>""></a>



</EntrysLoop>

<!-- Loop End -->

</ul>



</div><!-- /.main -->

以前ご紹介した「記事タイトルのスタイルを変更する」を実践されている方は、上記ソースの <h2 class="title"><%CategoryName%> のアーカイブ</h2> も同様に <div class="title_area"></div> で囲うと記事タイトルと同じスタイルを適用することができます。

テンプレート「スタイルシート」に手を加える

スタイルシートにリストのスタイルを定義していない方は、以下のソースをスタイルシートに追加してください。削除するソースはありません。

.main ul.archive_list {

    margin: 0 0 1em 3em;

    line-height: 2.1;

}



.main ul.archive_list li {

    list-style-type: circle;

}



ul.archive_list span.small {

    font-size: 80%;

    color: #999;

}

尚、リストの先頭に表示される「マーカー」（list-style-type の部分）には他にも種類があるので、以下のページを参考に、変更してみてください。

スタイルシート［CSS］/リスト/マーカーの種類を指定する - TAG index Webサイト

完成

これでアーカイブリストにタイトルが追加され、一覧の表示もシンプルになりました。