Macの手書き説明書

macOSのアプリ紹介と基本的な使い方を解説

FC2ブログテンプレートをAutoPagerize対応した

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

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さんにのっているこのマークアップ例です。

広告


関連記事

広告

この記事を共有する

広告

関連記事

5 Comments

oamaxa  

LDrizeにも対応させるともっと幸せになれますよ。

2008/02/20 (Wed) 00:44 | EDIT | REPLY |   

veadar  

コメントしていただいた通り結構幸せになれました。
このブログを見てくださる方々も幸せになっていただければ、嬉しい限りです。

2008/02/20 (Wed) 02:29 | EDIT | REPLY |   

otsune  

rel="prev"

次ページのリンクタグにrel="next"を付けるのであれば、前ページのリンクタグにrel="prev"を付けると合理的だとおもいます。
(AutoPagerizeの動作に直接は関係ないですが)

2008/02/20 (Wed) 04:04 | EDIT | REPLY |   

veadar  

確かにnextを付けるならprevを付けるのが道理ですね。
変更しておきます。
コメントありがとうございます。

2008/02/20 (Wed) 14:07 | EDIT | REPLY |   

BOOWY命  

すみません。

この記事を参考にさせていただきました。
ありがとうございます。
うまくいったと思ったんですが、
重大な不具合が発生してしまい、
どうすることもできず困ってます。
お手数ですが、ご教示願えませんでしょうか?

以下のブログを運営しています。
http://boowyblog.blog35.fc2.com/

通常の表示時は問題ないんですが、
コメント表示時にこのAutoPagerizeに対応する前ですと
----------
記事欄
----------
コメント欄
----------

という具合に表示されていました。

しかし、このAutoPagerize対応後に
コメント表示をすると
一瞬
----------
記事欄
----------
コメント欄
----------
が表示されるのですが、
すぐにリロードされ

----------
記事欄
----------
その他の記事欄
----------
その他の記事欄
----------
その他の記事欄
----------
コメント欄
----------
とどんどん他の記事が間に挿入されてしまい
コメントが表示されなくなりました。
コメント表示時はそのページのhtmlに
移動し、次へのボタンはないにも関わらず、
何故かこのような現象が発生してしまいます。
お手数ですが、なにかよきアドバイスを
いただけませんでしょうか。

ちなみにautopagerize_insert_beforeは
フッターの前に配置してます。
もちろんコメント欄はその上です。

2010/08/28 (Sat) 04:53 | EDIT | REPLY |   

Add your comment