「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト (別のおすすめスクリプトを追記しました)

｜2023/11/08 ｜17
アイキャッチ
タイトル表示ページャー
CONTENTS

はじめに

Contempo や Emporio 等の公式新テーマの場合は、予めページネーション(前後記事リンク)を表示させるようにしておく必要があります。詳しい手順はこちらを御覧ください →

ファビコンふじろじっく
サムネイル
ページネーション(前後記事リンク)を表示させる
これは基本的に無くてはならない機能ですよね。
https://fujilogic.blogspot.com/2019/05/display-pagenation-link.html

注意点

前後記事リンクを記事タイトルに置き換えるスクリプトを使うと、アクセス時に前後記事のPVもカウントされてしまいます。
「人気の投稿」のランキングが不正確になってしまう等の弊害がありますので、その点をご留意くださいませ。

2020/07/29 追記: 不具合対応

一部の環境で上手く表示されない不具合があったようなので改善策を施してみました。
上手く表示されなかったという方は、改訂版の設置手順を一度お試しくださいませ。
これまでは「HTML/JavaScript」ガジェットとして設置するようにしていましたが、HTML 内に直接コードを挿入するように変更しています。

スクリプトコードの設置

HTML を編集しますので、必ずテーマのバックアップを取ってから行って下さい。

  • テーマの HTML 編集画面で </body> の上に以下のコードをコピペします。

    • <body>～</body> 内であっても、上の方に置くと動作しなかったり正しく表示されない可能性がありますので、なるべく下の方に置いて下さい。

  • QooQ 用とそれ以外のテーマ用の2種類ありますのでお間違いなく。
  • jQuery を導入済みの場合は当該のタグは不要です。
  • 20は最大表示文字数です。設定文字数を超えると末尾に"..."が表示されます。

QooQ 以外のテーマ

  <b:if cond='data:view.isPost'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//<![CDATA[
    var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink + " .entry-title:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    if (olderLinkTitle.length > 20) {
        olderLinkTitle = olderLinkTitle.substr(0, 20) + "...";
    }
    $("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink + " .entry-title:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    if (newerLinkTitle.length > 20) {
        newerLinkTitle = newerLinkTitle.substr(0, 20) + "...";
    }
    $("a.blog-pager-newer-link").text(newerLinkTitle);
});
//]]>
</script>
  </b:if>

QooQ の場合はこちら

  <b:if cond='data:view.isPost'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//<![CDATA[
    var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink + " #single-header-title:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    if (olderLinkTitle.length > 20) {
        olderLinkTitle = olderLinkTitle.substr(0, 20) + "...";
    }
    $("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink + " #single-header-title:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    if (newerLinkTitle.length > 20) {
        newerLinkTitle = newerLinkTitle.substr(0, 20) + "...";
    }
    $("a.blog-pager-newer-link").text(newerLinkTitle);
});
//]]>
</script>
  </b:if>
HTML

レイアウト調整 (QooQ)

QooQ の場合はテーマのHTML編集で以下の CSS を 追記すると長いタイトルでもレイアウトが崩れずに1行で表示されます。

/*前後の記事*/
#blog-pager-older-link,
#blog-pager-newer-link {
    width: 49%;
}
QooQページャー
こんな風になります↓↓

QooQページャー2

参考にさせて頂いた記事

ファビコンBlogger の小枝
サムネイル
Blogger の「前の投稿」「次の投稿」を記事タイトルに変更する
この Blog もそうなのですが、Blogger で記事を閲覧すると、画面下のほうに「次の投稿」「ホーム」「前の投稿」というリンクが表示されます。
http://twig-jp.blogspot.com/2014/12/30.html

2020/09/24 追記: 別のおすすめスクリプトの紹介

先に紹介したスクリプトは、仕様上、前後記事のタイトル読み込み時に PV もカウントしてしまうため、各記事のアクセス数が不正確になってしまうという欠点があったのですが、以下で紹介する Dr.ウーパ氏作成のスクリプトは、余計なアクセスが発生しない構造(ページではなくフィードを見に行く)になっているようです。しかも jQuery 不要！
というわけで当ブログのスクリプトもこちらに入れ替えました(^^;

設置方法は上記のスクリプトと同じく、</body> の上に以下のコードをコピペするだけです。

QooQもそれ以外もコードは共通です。QooQの場合は上記の CSS でレイアウト調整もお忘れなく。

※QooQ、ZELO、Vaster2、公式シンプルテーマでは動作確認済みですが、Smartテーマは上記のスクリプトも下記のスクリプトも機能しませんのであしからず。また公式新テーマもこちらのスクリプトはそのままでは機能しないようです(コード内のIDの書き換え等の対応で動作するかも？)

2021/02/14 追記: Smart テーマ用カスタマイズ

Smart テーマの作者さんが記事ページャに記事タイトルを表示させる方法を紹介されていました。Smart ユーザーの方はこちらをご参考にどうぞ。

ファビコンBlogger Labo
サムネイル
【自作テンプレートカスタム】個別記事ページャに記事タイトルを表示させる方法
当サイトのテンプレートの個別記事ページャを「PREV/NEXT」から「記事タイトル」に変更する方法を説明します。
https://blogger-learning-rab.blogspot.com/2021/02/pager-post-title.html

※オリジナルのコードを圧縮してあります。圧縮前のオリジナルコードや詳細な解説は下記のリンク先をご参照ください。

<!-- set next prev page title start -->
<script type='text/javascript'>
//<![CDATA[
(function(){function b(k){var j=document.createElement("script");j.setAttribute("type","text/javascript");j.setAttribute("src",k);g(j)}function a(){return document.getElementsByTagName("head")[0]}function g(k){var j=a();j.appendChild(k)}var d=5000;var h=document.getElementById("Blog1_blog-pager-older-link");if(h){var f=h.getAttribute("href");e("blog-pager-older-link",f,"addPrevPageTitle")}var c=document.getElementById("Blog1_blog-pager-newer-link");if(c){var i=c.getAttribute("href");e("blog-pager-newer-link",i,"addNextPageTitle")}function e(m,l,q){if(!m){return}if(!l){return}if(l.indexOf("?")!=-1){return}var n=location.protocol+"//"+location.hostname+"/";var k=l.replace(n,"");if(!k){return}k="/"+k;var p=document.createElement("div");var j=m+"-title";p.innerHTML='<a href="'+l+'" id="'+j+'">now loading...</a>';var o=document.getElementById(m);if(!o){return}o.appendChild(p);setTimeout(function(){b(n+"feeds/posts/summary?alt=json-in-script&callback="+q+"&max-results=1&path="+k+"&redirect=false")},d)}})();function addPrevPageTitle(a){addPageTitle(a,"blog-pager-older-link-title")}function addNextPageTitle(a){addPageTitle(a,"blog-pager-newer-link-title")}function addPageTitle(a,e){var d="";if(a.feed.entry){if(a.feed.entry.length>0){d=b(a.feed.entry[0].title.$t)}}var c=document.getElementById(e);if(!c){return}c.innerHTML=d;function b(f){var g=document.createElement("div");if(g.innerText!==void 0){g.innerText=f}else{g.textContent=f}return g.innerHTML}};
//]]>
</script>
<!-- set next prev page title end -->

こちらのスクリプトは置き換えるのではなく「次の投稿」「前の投稿」を残して、その下にタイトルを表示します。(当ブログではHTMLを弄ってタイトル表示だけにしています)

タイトル表示ページャー2

スクリプト提供元

ファビコンDr.ウーパのコンピュータ備忘録
サムネイル
遅延読み込み機能追加-Feedから情報取得-Blogger:「次の投稿・前の投稿」にページタイトルを付与する
Bloggerにて、「次の投稿・前の投稿」にページタイトルを付与するJavaScript(Feedから情報取得)に、遅延読み込み機能を追加しました。
http://upa-pc.blogspot.com/2014/12/blogger-prev-next-page-title-script-delay.html

2020/01/10 追記: おすすめスクリプトの紹介 その2

こちらの IB-Note さんが、さらに素晴らしいスクリプトを作られました！

ファビコンIB-Note
サムネイル
Bloggerにサムネ画像付きページャーを導入する | IB-Note
前後の投稿などを分かりやすく表示してくれるページャーですが、例によってBloggerのページャーは超絶シンプル。これではあまりにも味気ないので、少しおしゃれな感じにしてみたいな～と思いサムネ画像付きページャーを作ってみました。
https://itblogger-note.blogspot.com/2021/01/pager-with-thumbnail.html

jQuery 不要でフィードデータを取得するという点は上記のDr.ウーパ氏のスクリプト同じですが、こちらはタイトルだけでなくアイキャッチ画像も表示される仕様になっています。

QooQ のテストブログで試してみたところ、問題なく動作することを確認しましたので早速メインのこのブログにも導入し、CSSだけ好みのデザインに調整。いい感じになって非常に満足しています！

詳しい導入方法については、上記リンク先の IB-Note さんの記事に書かれていますのでこちらでは割愛しますが、一応補足としてコードの挿入に関して、デフォルトのページャータグの <b:include name='nextprev'/> は2箇所ありますので、上側の方のタグを <noscript>～</noscript> で囲って、そのタグの下にスクリプトコードをコピペしてください。

<noscript><b:include name='nextprev'/></noscript>
(ここにサムネ付きページャーのコード)

IB-Note さんの記事ではデフォルトのページャータグをコメントアウトすることを推奨されていますが、コメントアウトではなく <noscript>～</noscript> で囲っておくと、万が一 JavaScript が無効になっていたりした時に、代わりに Blogger デフォルトのページャーが表示されるので安心です。

2022/09/11 追記: またまた別のページャーに変えました。

先日より Bloggerフィードの一時的な不具合(仕様変更？)により、稀に「サムネ付きページャー」が表示されないケースがある事を確認したため、こちらのシンプルな「タイトルページャー」に変更しました。

ファビコンBloggerテンプレート自作カスタム
サムネイル
Blogger自作次ページタイトル設定
投稿を表示したときに下に表示される次の投稿や前の投稿をタイトル名に変更する自作テンプレートのjavascriptです。 次の投稿や前の投稿はこういう感じになっています。 <a class="blog-pager-older-link" href="https://google...
https://googlebloggertrouble.blogspot.com/2022/03/bloggernextlinktitle.html