既定のスキンでは、月別アーカイブやカテゴリーのページは、メインの目次ページと同じく記事を一覧するタイプのテンプレートを使っています。今回は、自作のリスト式テンプレートを導入することで、月別アーカイブやカテゴリーをリスト化して読みやすくしてみます。

リスト化すると、記事本文は月別アーカイブやカテゴリーでは読めず、個別アイテムのページで読むことになりますが、反面、コメントやトラックバックの状況がわかりやすくなるので、レスを忘れることが少なくなります(たぶん)。
リスト式テンプレートは既成のもの(例:mango_list/list)もありますが、今回はテンプレート作りの練習もかねて自作にこだわってみました。

まず、ログインして管理ホームのページにいったら、左側のメニューから「テンプレート編集」(図1)を選んでテンプレートのリストを表示します。次に、下の方にある「新しいテンプレート」という項目(図2)に、適当なテンプレート名とテンプレートの説明を入力して「テンプレートを作成」ボタンを押します。画面がリロードされると、テンプレートリストに、たったいま作成したテンプレートが現れるので(図3)、「編集」(図4)をクリックしましょう。
「テンプレートの編集」という画面には、先ほど入力したテンプレート名とテンプレートの説明の他に、たくさんの未入力の項目がありますが、今回つかうのはごく一部だけです。
◆アイテム>アイテムのヘッダー
スタイルシートを先頭に、リストを定義しています。
<style type="text/css">
<!--
ul.catlist a {border-width:0}
ul.catlist li {line-height:0.5em}
-->
</style>
<ul class="catlist">
◆アイテム>アイテムの本体
月/日 件名 [コメント数/トラックバック数]、という形でリストアップしています。
<li>
<a href="<%itemlink%>"><%date%> <%title%></a>
[<%comments%>/<a href="<%itemlink%>#trackback"><%TrackBack(count)%></a><a name="trackback" id="trackback"></a>]
</li>
◆アイテム>アイテムのフッター
</ul>
◆コメント (無い場合)>コメントが無い時
<%commentcount%>
◆コメント (最大表示数より多い場合)>コメントが多すぎる時
blink クラスを使った強調表示を行なっています。最大表示数はBlog設定の編集ページにある「コメントの最大量」で行ないます。通常は既定値の0のままでOKです。
<a href="<%itemlink%>" rel="bookmark">
<span class="blink"><%commentcount%></span>
</a>
◆日付と時刻>日付と時刻
日付の書式です。
%m/%d
記入が終わったら「テンプレートの更新」(図5)を押しましょう。すべてを元の戻したいときは「リセット」(図5)を押しましょう。
**********
テンプレートができたら、スキンのテンプレート指定を書き替えます。左端のメニュー下段の「スキン編集」(図6)をクリックして、いまブログで使っているスキンをみつけます。使っているスキンの名前がわからなければ、Blog設定の編集ページにある「標準のスキン」を参照しましょう。
次に定義済みパーツの中から「月別アーカイブページ」を選んで、<!--Contents--> と <!--End of Contents--> の間にある <%archive(xxxxx)%> という部分をみつけましょう。xxxxxは、いま使っているテンプレート名です。そして、xxxxx の部分を、先ほどつくった自作のテンプレート名と入れ替えます。
うまくいったら「スキンの更新」(図7)ボタンで更新を確定しましょう。間違ったら「リセット」ボタンで元に戻しましょう。
同じ作業をメインの目次ページでも行ないます。こちらのページでは表紙とカテゴリーの2つの表示を兼用しているので if文による切替を行ないます。
オリジナルのスクリプトなら、以下の例のように
<!--Contents-->
<%blog(mango/short,15)%>
</div>
<!--End of Contents-->
という部分を
<!--Contents-->
<%if(category)%>
<%blog(newlist,100)%>
<%else%>
<%blog(mango/short,15)%>
<%endif%>
</div>
<!--End of Contents-->
という形に変更します。
このシリーズにそって改造をしている方は、以下の例のように
<%if(category)%>
<h3 class="item">【<%category%>】</h3>
<%else%>
<div class="profile" id="prof">
<div class="prof_txt" id="prof">
自己紹介のテキスト
</div>
<div class="prof_img" id="prof">
<img src="http://blog-imgs-30.fc2.com/0/w/l/0wl/20050513-profile2.gif" />
</div>
</div>
<%endif%>
<%blog(clonedmango/short,15)%>
</div>
の部分を
<%if(category)%>
<h3 class="item">【<%category%>】</h3>
<%blog(newlist,100)%>
<%else%>
<div class="profile" id="prof">
<div class="prof_txt" id="prof">
自己紹介のテキスト
</div>
<div class="prof_img" id="prof">
<img src="http://blog-imgs-30.fc2.com/0/w/l/0wl/20050513-profile2.gif" />
</div>
</div>
<%blog(clonedmango/short,15)%>
<%endif%>
</div>
のように改造しましょう。
うまくいったら「スキンの更新」(図7)ボタンで更新を確定しましょう。間違ったら「リセット」ボタンで元に戻しましょう。
以上の作業が終わったら、ブログに戻り、表紙からカテゴリー別表示を行なったり、月別表示を行なって、リストが正しく表示されているかどうか確認しましょう。
**********
いつものごとく疑問・質問・間違いなどありましたら、遠慮なくコメントください。間違いがあったら、あわてて訂正させていただきます。また、こういうネタをやってほしい、などの要望がありましたら、同様にコメントください。よろしく〜 m(. .)m
次回は、アダルト関係のスパム・コメントの防止方法について考えてみたいと思います。