Bloggerの個別記事のページナビゲーションに記事タイトルをつける方法

完成図

多くのブログで個別記事に前後の記事のページのリンクがついてますが、それをBloggerで実現できないかなと思っていたのですが、なんとかできました。イメージ的にはこういう感じになります。

サンプルソース

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="navigation_post">
 <b:if cond='data:newerPageUrl'>
<span style="float:left;"><a expr:href='data:newerPageUrl' id="newxx">新しい記事</a></span>
 </b:if>

 <b:if cond='data:olderPageUrl'>
 <span style="float:right;"><a expr:href='data:olderPageUrl' id="oldxx">以前の記事</a></span>
 </b:if>
</div>
<div style="clear:both;"></div>
<!-- ページャのスクリプト -->
<script type="text/javascript">
// <![CDATA[
function showTitleOld(root) {
  var title="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    title= root.feed.entry[i].title.$t;
  }
  document.getElementById("oldxx").innerText = title+">>";
}
function showTitleNew(root) {
  var title="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    title= root.feed.entry[i].title.$t;
  }
  document.getElementById("newxx").innerText = "<<"+title;
}
//]]>
</script>

<b:if cond='data:newerPageUrl'>
<script type='text/javascript'>
  var sHome="<data:blog.homepageUrl/>";
  var sNewURL="<data:newerPageUrl/>";
  sNewURL = sNewURL.replace(sHome, "");
  sNewURL = "/" + sNewURL;

  document.write(unescape("%3Cscript")+" src='"+sHome+"/atom.xml?redirect=false&amp;path="+sNewURL+"&amp;max-results=1&amp;alt=json-in-script&amp;callback=showTitleNew' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
</b:if>


<b:if cond='data:olderPageUrl'>
<script type='text/javascript'>
  var sHome="<data:blog.homepageUrl/>";
  var sOldURL="<data:olderPageUrl/>";
  sOldURL = sOldURL.replace(sHome, "");
  sOldURL = "/" + sOldURL;

  document.write(unescape("%3Cscript")+" src='"+sHome+"/atom.xml?redirect=false&amp;path="+sOldURL+"&amp;max-results=1&amp;alt=json-in-script&amp;callback=showTitleOld' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
</b:if>
<!-- /ページャ -->
</b:if>
テンプレートに上記のようなものを追加すれば、その位置に表示されます。

テンプレートでは、data:newerPageUrl、data:olderPageUrlのように記事のURLだけは取得できるので、そのURLからフィード(Feed)情報から記事タイトルを取得してそれに置き換えるという風にしています。

サンプルソースは、ベタベタに書いてますのでわかりやすいとはおもいますが・・・。

挿入箇所

Blog1のmainあたりに以下の部分があるかと思います。
    <!-- navigation -->
    <b:include name='nextprev'/>

ここに以下のように変更します
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- navigation -->
    <b:include name='nextprev'/>
</b:if>
ここに、上記のサンプルをコピペする

原理

以下のようにPath指定でフィード(Feed)を取得できることを利用しています。
http://blog2.k05.biz/atom.xml?redirect=false&path=/2012/04/00609.html
http://blog2.k05.biz/feeds/posts/default?redirect=false&path=/2012/04/00609.html
クリボウの Blogger Tips: Blogger の投稿ページ URL からその投稿のみ記載のフィードを得る方法」を参考にさせていただきました。

【ブログ内で関連ある記事】

スポンサーリンク

『Bloggerの個別記事のページナビゲーションに記事タイトルをつける方法』へのコメント

  1. 名前:universe : 投稿日:2013/05/29 21:41

    KUROさん、度々失礼します。m(__)m
    私は現在ブログで以下URLの方法で、
    http://rrvf.blogspot.jp/2011/09/blogger.html
    次の記事と前の記事のタイトル表示をしているのですが、
    時々javaスクリプトなどを挿入した時に上手く表示されないことがあったりしたので、
    (私の挿入位置に多くは問題があって挿入位置を色々変更すると直るのですが)

    KUROさんのこちらの方法を使わせて頂こうと思って試してみたのですが、
    以下の様なエラーをBloggerブログが吐いてしまいます。
    『Element type "div" must be followed by either attribute specifications, ">" or "/>".』

    また、エンティティ変換をしてHTML編集にて挿入するとエラーは出ないのですが、
    ブログでの表示はされません。

    上記エラーの意味がよくわからないのですが、
    Google翻訳で翻訳した所
    スクリプトに何か足りないものがあるような感じです。


    <一応他にエラー表示の意味を調べた所>
    -----------------------------------------------
    メッセージ
    Element type [要素名] must be followed by either attribute specifications, ">" or "/>"
    意味
    [要素名]の後ろには仕様に従った属性か、”>"または"/>"が必要です

    原因と対処
    要素が正しく書かれていません。属性の値の引用符やタグのとじ忘れがあった場合に出力されます。対象の要素の属性と閉じタグを確認してください。

    ----------------------------------------------
    のようなことがありました。


    何か対処法がありましたら、
    何卒よろしくお願い申し上げます。
    m(__)m

  2. 名前:管理人 : 投稿日:2013/05/29 22:50

    コメントありがとうございます。
    おかげで問題点がわかりました。

    問題部分を見直して、記事を書き直したので再度試していただけるとありがたいです。

    挿入位置について記事追加と、Bloggerの標準?テンプレートで管理画面の「HTMLの編集」で試しました。

    ■エラーになった原因
    1.半角スペースが、実は違う文字コードの文字になっていた。(見た目は半角スペースだが、実際には違っている)
    2.&部分が、&amp;の間違い (URL部分は、Bloggerの場合、そうしないとダメ)

    ※WPに引越しした時に、変になったんだと思います

    ・半角スペース(0x20)->&nbsp; -> 0xc2a0 (UTF-8)
    ・&amp; ->&

    ほかの記事も半角スペースの問題があったので、一応対応しました。

  3. 名前:universe : 投稿日:2013/05/29 23:32

    KUROさん、
    早速のご対応誠にありがとうございます。

    無事表示されました。
    ありがとうございます。

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。