【自作テンプレートカスタム】個別記事ページャに記事タイトルを表示させる方法

2021/02/14

コメントで当サイトのテンプレートの個別記事ページャを「PREV/NEXT」から「記事タイトル」に変更したいというリクエストを貰ったのでお答えしたいと思います。

概要

今回説明するのは、上記画像のようにページャの文言を「PREV/NEXT」から「記事タイトル」に変更するというものです。

上記の方法を解説しているサイトはいくつかありますが、当サイトで配布しているテンプレートは我ながら設定が独特すぎるので、公式テンプレートに沿ったカスタマイズ方法が適応できないことがよくあります。

そのため、ここでは当サイトの自作テンプレート専用の方法を紹介したいと思います。

【当サイトのテンプレート以外の方法は以下がオススメ】

・Blogger「次の投稿」と「前の投稿」を記事タイトルに（きゃんつくばっと）
・「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト(ふじろじっく)

作業手順

1．テンプレートのページャ部分を書き換える

・管理画面 → テーマ → HTMLを編集を選択してテンプレートエディタを開く
・Ctrl＋Fで「<b:includable id='single-pager'>」を検索
・以下の部分を探し出して書き換える（変更前に変更後を上書き）
　→ ※aタグにIDとクラスを付与しただけ

【変更前】

<b:includable id='single-pager'>
<div class='single-pager'>
<ul>
<li class='prev-post-link'>
<a expr:href='data:olderPageUrl'><i aria-hidden='true' class='fa fa-angle-double-left'/> PREV</a>
</li>
<li class='next-post-link'>
<a expr:href='data:newerPageUrl'>NEXT <i aria-hidden='true' class='fa fa-angle-double-right'/></a>
</li>
</ul>
</div>
</b:includable>

【変更後】

<b:includable id='single-pager'>
<div class='single-pager'>
<ul>
<li class='prev-post-link'>
<a class='pager-newer-title' id="newer-pager" expr:href='data:olderPageUrl'>PREV</a>
</li>
<li class='next-post-link'>
<a class='pager-older-title' id="older-pager" expr:href='data:newerPageUrl'>NEXT <i aria-hidden='true' class='fa fa-angle-double-right'/></a>
</li>
</ul>
</div>
</b:includable>

2．HTML/JavaScriptガジェットにスクリプトを追加

・管理画面 → レイアウトを開く
・メイン → ガジェットを追加 → HTML/JavaScriptガジェットを追加
・HTML/JavaScriptガジェットにタイトルを付けずに、以下の内容をコピペする
・ブログ投稿の下辺りに配置して保存する

【HTML/JavaScriptガジェットの内容】

上記は「ふじろじっく」さんのスクリプトを参考にしています。

解説

全体的な解説

この方法はページャのテキスト（PREV/NEXT）をJavaScriptで書き換えるというものです。

①の方法は、書き換えるために必要なクラス名とID名が無かったので追加しました。

②の方法は、①で設定したクラス名の部分を記事タイトルに変更するものです

IDはJavaScriptで変更したページャを変更するために付けています。

スクリプトについて

まず、このスクリプトはjQuery（JavaScriptのライブラリ）で書かれています。そのためjQueryを呼び出す必要がありますが、当サイトのテンプレートではjQueryを既に読み込んでいるので新たに呼び出す必要はありません。

var olderLink = $("a.pager-older-title").attr("href");
$("a.pager-older-title").load(olderLink + " .post-body h1:first", function () {
var olderLinkTitle = $("a.pager-older-title:first").text();

上記は記事タイトルを変数に入れるスクリプトです。当サイトのテンプレートでは「 .post-body h1」が記事タイトルに該当します（特別にIDやクラス名を設定してなかったので中途半端な指定になっています^^；）。半角スペースは必要なので修正しないでください。また、記事タイトル該当部分に新たにIDやクラス名を付与すれば、そちらで代用することも可能なハズです。

if (olderLinkTitle.length > 20) {
olderLinkTitle = olderLinkTitle.substr(0, 20) + "...";
}

上記は文字数制限です。半角で20文字を超えるタイトルは「...」で省略します。不必要な場合は削除して下さい。

$("a.pager-older-title").text(olderLinkTitle);

上記は「PREV」を「記事タイトル」に変更するスクリプトです。text（”挿入する文字列” + olderLinkTitle）のように書き換えることで文字列を追加することも出来ます。が、今回はCSSで追加するように設定しています。

以上は「PREV」部分の解説ですが、「NEXT」部分もほぼほぼ同じ内容です。

CSSについて

今回はJavaScriptで変更後の記事タイトルをCSSで変更できるように設定しました。

上記は初心者向けに敢えて<style>タグを使用しています。

上記は「記事タイトル」の前後に「≪/≫」を付加しています。

上記を変更することで矢印を変えたり、他の設定を加えることも出来ます。

最後に

とりあえず、ここでは「PREV/NEXT」から「記事タイトル」に変更するところまで説明しました。

当サイトのテンプレートではモバイルのデザイン崩れを防ぐために「PREV/NEXT」にしていましたが、これを適応するとタイトルの長さによってはデザインがやや崩れるので、その辺りは各自で対応よろしくお願いします。