エントリーイメージ（↑上の画像）のようにずっとしたくて、今回重い腰を上げて色々調べて、ようやく実現しました。今回は、それを実現可能にした素晴らしいプラグインPaged Archivesの導入方法を分かりやすく解説します。
Movable Typeでは、カテゴリ別、月別・日別、その他アーカイブページでは、エントリーが増えていくに従って1ページに表示される情報量がどんどん膨大なものになってしまいます。
15記事あったら15記事分、50記事あったら50記事分、全部そのアーカイブページに詰め込まれてしまいます。
それでは上手くないので、一つの方法として設定画面から記事の表示件数を変えられるのですが、例えば10に設定すると、15記事あったら残りの5記事が、50記事だったら残りの40記事が、それぞれ表示されなくなってしまいますからこれも上手くありません…。
そこで登場するのがPaged Archivesというプラグインです。これを導入すれば、自分の好きな記事数ごとにページを分割し、それらのページ間を簡単に移動できるようにリンクを貼ることができます。
さっそく導入方法を紹介します^^
Paged Archives プラグインの導入、設定方法
まずはじめに、プラグインをダウンロードします。Paged Archiveのダウンロードページにアクセスし、MT5の方はPA 1.4を、MT3とMT4の方はPA 1.31をダウンロードしてください。
次に、ダウンロードしたzip（圧縮）ファイルを解凍し、「pagedarchives.pl」をFTPソフトなどを利用して、pluginフォルダにアップロードします。pluginフォルダの場所は、MTをインストールしたフォルダのすぐ下の階層にあります。
MT管理画面から、「ツール」→「プラグイン」と進みます。
プラグイン設定画面にPaged Archives1.31（あるいは1.4）と表示されていますので、設定画面を表示し、それぞれの項目を埋めます。（※画面下参照。）
URL設定「Use"index"in filenames」についてですが、チェックを入れない場合は、ページを分割した内の2ページ目に移動した時、そのアーカイブのURLに2.phpという文字列が付きます。対して、チェックを入れると、アーカイブのURLにindex2.htmlという文字列が付きます。
続いて、分割したいアーカイブテンプレートにタグを挿入します。私の場合、カテゴリーアーカイブテンプレートに挿入したいので、「カテゴリ名/index.html」を開きます。
<MTPAEntry>という文字を<MTEntries>のすぐ後に、<MTPAEnd>という文字を</MTEntries>のすぐ後に入れます。
<mt:Entries>
<MTPAEntry>
</mt:Entries>
<MTPAEnd>
そして、分割ページ間を移動できるナビゲーション（リンク）を設置します。<MTPAEnd>の後に続けて、以下のソース記述します。
<MTPAIfMultiplePages><MTPAPreviousPage text="前へ">
<MTPAPageList> <MTPANextPage text="次へ">
</MTPAIfMultiplePages>
私のブログでは、以下のように記述しました。（ナビゲーションについては色々な記述方法があります。こちらでは幾つかのサンプルが公開されていますので、参考にしてみて下さい。）
さらに、SEO対策を考えれば、移動先のページ…2ページ目3ページ目もタイトル<title>が同じだと良くないと思いますので、タイトルタグを以下のように編集しました。
<title><$mt:CategoryLabel$><MTPAIfMultiplePages> - <MTPAPageNum>ページ目</MTPAIfMultiplePages> | <$mt:BlogName encode_html="1"$></title>
さらにさらに、デフォルトのままだと見栄えがかっこ悪いので、スタイルシートを駆使して装飾したいと思います。
先ほど設置した分割ページ間を移動できるナビゲーションのソースに戻り、以下のように<p class="pagelist"></p>タグで囲みました。
そして、このpagelistというクラスに以下のスタイルを記述し、適用させます。
p.pagelist {
font-size:12px;
clear:both;
padding-top:10px;
text-align:center;
}
p.pagelist a{
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#fff;
color:#0066cc;
}
p.pagelist a:hover{
text-decoration:none;
padding:4px;
background:#0066cc;
color:#fff;
}
p.pagelist b{
font-weight:bold;
text-decoration:none;
padding:4px;
border:1px solid #0066cc;
background:#0066cc;
color:#fff;
}
これで見栄えが多少良くなったので、取り合えず完成です！記事を書きながら同時に導入するのは、結構大変でした…。
ここまで読んで頂いた方は実際に、10記事以上投稿してあるカテゴリー（WEBデザイン・CSSカテゴリーなど）をクリックして、一番下の完成品を見てくださいね。
