Macの手書き説明書

このブログのテンプレートにいつも使わせていただいているhiyoko-menuをAutoPagerize対応にしました。

FC2ブログでAutoPagerizeに対応させたいと考えている人やhiyoko-menuのテンプレートを使っている人のために、僕がしたことを書いておこうと思います。

AutoPagerizeの作者さんのサイトSWDYHを参考にちょこちょこと弄りました。

AutoPagerizeに対応させるには三つの要素をテンプレに加えるだけです。

その三つは

link要素またはa要素でrel="next" (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

まずは
link要素またはa要素でrel="next"

次のページリンクが指定されている要素にrel="next"を最後に付け加えるだけです。

FC2ブログならば次のページリンクを差し込む変数<%nextpage_url>と<%nextentry_url>を検索して、そのhtmlタグ内にrel="next"classを追加します。

hiyoko-menuには<!-- ページセレクト -->以下に二箇所ありました。

<a href="<%nextpage_url>" title="過去のページ">NEXT</a>
<a href="<%nextentry_url>" title="<%nextentry_title>">NEXT</a>

これを以下のように変更します。

<a href="<%nextpage_url>" title="過去のページ" rel="next">NEXT</a>
<a href="<%nextentry_url>" title="<%nextentry_title>" rel="next">NEXT</a>

次に
classでautopagerize_page_element

AutoPagerizeで読み込みたいページコンテンツ部分を指定します。
FC2ブログでは<!--topentry-->の変数のすぐ下のdivを指定するのが調度良いようです。
テンプレートによって違うので各自最適の場所を探してください。

hiyoko-menuでは

<!-- エントリ -->
<!--topentry-->
<div class="entry">

が調度良かったので、それを以下のように変更しました。

<!-- エントリ -->
<!--topentry-->
<div class="entry autopagerize_page_element">

最後に
classでautopagerize_insert_before
ここで指定した要素のすぐ上で、AutoPagerizeで次のページ内容が読み込まれます。
上記の「classでautopagerize_page_element」で指定した部分の下、フッター近くのdiv要素を指定するのがいいようです。
特定のページでしか表示されない、変数<!--comment_area--><!--archive--><!--category-->などのタグ以外の場所を指定します
hiyoko-menuでは

<!-- ページセレクト -->
<div class="pageselect">

が期待する表示位置だったので、それを

<!-- ページセレクト -->
<div class="pageselect autopagerize_insert_before">

上のように変更しました。

長々説明してきましたが、AutoPagerizeの対応のさせ方で一番わかりやすいのはSWDYHさんにのっているこのマークアップ例です。