徒然なるままに

私がブログを始めるに当たってSeesaaブログを選んだ一つの理由にHTMLやスタイルシートの直接編集ができることがありました。
これまでもここやここなど他のサイトを参考にいくつかHTMLをいじってきました。

その中の1つにカテゴリページで記事一覧を表示するというものがあります。
カテゴリ別の記事タイトル一覧を示すことができて過去ログページにも簡単に応用可能な非常に便利なものだと思います。
以前はカテゴリ中の記事数が増えるとリストが冗長になってしまうということがありました。
記事タイトルの一部を表示したり2段組みにする対処方法もありましたが、このブログは記事タイトルが長いことが多いので気が引ける方法でした。

そんな中、先日Seesaaブログのカテゴリページと過去ログページにページング機能が追加されました。
これによってカテゴリページと過去ログページに表示される記事数は最大で20件に制限されることになります。
すると今後は上述の記事一覧表示の仕方ではその時点で表示されている記事のみの一覧表示になります。
このままではその記事リストが以前そうであったようにそのカテゴリ・過去ログの全ての記事リストであるとも誤解されそうなので、検索エンジンの検索結果ページのように「○件中○-○件目の記事一覧です。」と表示したいと考えました。
このブログではカテゴリ・過去ログページともに記事表示数は現在20に設定していますが記事数が20を超えているページで上記のように表示させています。
それ以外のページでは件数表示はしないようにしました。


まずはカテゴリページにこの件数表示を伴う記事一覧表示をさせる方法を示します。

いじるのは「記事」コンテンツのHTML。
具体的には「マイ・ブログ」＞「デザイン」＞「コンテンツ」＞「記事」＞「コンテンツHTML編集」とたどっていきます。
ここが図付きでわかりやすいと思います。

「記事」コンテンツのHTMLの中で

<% if:page_name eq 'category' -%> 〜 <% /if -%>

の部分がカテゴリページで(のみ)表示される部分です。

記事一覧はナビとページングの下に表示したいので以下の部分にコードを追加します。

<% if:page_name eq 'category' -%>
ナビ部分
<% if:pager.need_pager -%>
ページング部分
<% /if -%>
この部分に追加
<% /if -%>

ちなみにこの部分の直後には

<% loop:list_article -%>
記事部分
<% /loop -%>

があるはずです。

加えたコードは以下の通りです。

<div id="clist">
<script langage="JavaScript">
<!--
<% if:pager.need_pager -%>
var start=1+<% blog.category_page_cnt %>*(<% current_page %>-1);
var end=<% if:pager.next_page %><% blog.category_page_cnt %>*<% current_page %><% else %><% category.article_count %><% /if %>;
document.write("「<% category.name %>」カテゴリの<% category.article_count %>件中",start,"-",end,"件の記事一覧です。");
<% else -%>
document.write("「<% category.name %>」カテゴリの記事一覧です。");
<% /if -%>
// -->
</script>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>

以下で簡単にコードの説明をします。
ページングが表示されるとき、つまり記事表示数以上に記事数があるときは記事表示数と何ページ目を表示しているかと全記事数から表示される記事の最初と最後の記事が何件目の記事かを計算して
「(カテゴリ名)カテゴリの○件中○-○件目の記事一覧です。」
と表示します。
記事数が設定表示数以下でページングが表示されないときは
「(カテゴリ名)カテゴリの記事一覧です。」
と表示します。
その下の記事リストは既に紹介したサイトのコードをそのまま利用させてもらっています。
ちなみに表示記事数の設定は「マイ・ブログ」＞「設定」＞「ブログ設定」でカテゴリ・過去ログページともに変更可能です。


それでは過去ログページでの設定方法も示しておきます。

カテゴリページと同じく「記事」コンテンツのHTMLの中で以下の部分にコードを追加します。

<% if:page_name eq 'archive' -%>
<% if:archive_page_name eq 'month' -%>
ナビ部分
<% /if %>
<% if:archive_page_name eq 'mday' %><% /if -%>
<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>
ページング部分
<% /if -%>
この部分に追加
<% /if -%>
<% /if -%>

これはカテゴリページ部分の直前にあるはずです。
何も中身がない'mday'が何をする部分かわかりませんが'archive'内の'month'内部分が過去ログページの部分になっています。
(追記:サイドバーの「過去ログ」にリンクされている月別のアーカイブが'month'でカレンダーにリンクされている日別のアーカイブが'mday'だと思います。
ここで書いたことを応用すれば日別一覧などもできますね。)
カテゴリページのときと同様にページングの下に表示したいのでこの部分に追加します。

追加するのは以下のコードです。

<div id="clist">
<script langage="JavaScript">
<!--
<% if:pager.need_pager -%>
var start=1+<% blog.archives_page_cnt %>*(<% current_page %>-1);
var end=<% if:pager.next_page %><% blog.archives_page_cnt %>*<% current_page %><% else %><% archive.article_count %><% /if %>;
document.write("<% archive.createstamp | date_format("%Y年%m月") %>の<% archive.article_count %>件中",start,"-",end,"件の記事一覧です。");
<% else -%>
document.write("<% archive.createstamp | date_format("%Y年%m月") %>の記事一覧です。");
<% /if -%>
// -->
</script>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>

動作はカテゴリページと同様でページングが表示されるときは
「○年○月の○件中○-○件の記事一覧です。」
と表示してページングがないときは
「○年○月の記事一覧です。」
と表示します。


このブログではスタイルシートはいじっていませんが好みに応じて"clist"というこの記事リストのオリジナルのidをスタイルシートで設定すれば記事一覧のスタイルをカテゴリ・過去ログページで一括して変更可能です。



(追記)
スタイルシートも少しいじりました。
それと記事部分の下にもページングが表示されるのでコードはそちらと間違えないように注意が必要です。

(追々記)
現在、カテゴリページと過去ログページの記事表示数が最大300件になっているようです。
新たな発表が出ていないことからそれ以前にHTMLをいじっていない場合はもともと最大300件まで設定できていたのかもしれません。
しかし、このブログではSeesaaの機能追加の後にHTMLを一度デフォルトの状態にリセットしたのでいつの間にか最大20件から最大300件に変更されていた可能性もありそうです。
いずれにしても今後は記事表示数を多めに設定して全ての記事の一覧が表示されるようにしてもいいでしょうし、一覧のリストが長くなりすぎると思ったら少なめに設定するのもいいでしょう。
ここでは設定数を読み込んで表示を変えるようにしてあったので、この方法を試した方で記事表示数を多めに設定しなおす場合も特にコードをいじりなおす必要はないでしょう。