こんにちは祐（＠yuu304810）です。
今回は『前のページに戻るボタンを表示する方法』について、解説していきます。
下記が完成イメージです⇩
とくに難しい作業や、専門知識は必要ないので、ぜひ参考にしてみてください。
・前のページに戻るボタンを表示するメリット
・前のページに戻るボタンの表示方法・手順
前のページに戻るボタンを表示するメリット
なぜか『はてなブログ』の記事一覧（トップページ）には『次のページに進むボタン』しか表示されていないんですよね。
「どんな記事があるんだろ〜」次へ進む（ポチッ）
「あっ、さっきの記事の方が気になるなぁ・・・」
「戻ろ〜っと（あれ？）」
戻るボタンがないッ！！！！！
不便すぎませんか？
そんな状況を前のページに戻るボタンを設置することで防ぐことができます。
ぜひ導入してみてください。
前のページに戻るボタンを表示する手順
①ダッシュボードの【デザイン】を選択
↓
②【カスタマイズ（スパナマーク）】を選択
↓
③【フッタ】を選択
↓
④これから紹介するコードを貼り付ける
前のページに戻るボタンを表示するJavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
if(document.referrer.indexOf(document.domain) > -1) { /* 自分のブログからきたら↓ */
if($('.page-index')[0]) { /* トップページなら↓ */
if(location.search) { /* 「?page=」があるなら↓ */
var str_prev = '<span class="pager-prev"><a href="javascript:void(0);" onClick="history.back(); return false;" rel="prev">前のページ</a></span>';
if($('.pager-next')[0]) { /* 次のページボタンがあったら↓ */
$('.pager').prepend(str_prev); /* 前のページボタンを設置 */
}
else { /* 次のページボタンもないなら↓ */
var str_html = '<div class="pager autopagerize_insert_before">' + str_prev + '</div>';
$('#main-inner').append(str_html); /* 前のページボタンと次のページボタンを設置 */
}
}
}
}
});
</script>
上記のコードを、フッタにコピペするだけでOKです。
これで、前に戻るボタンを表示することができます。
まとめ
前のページに戻るボタンを表示するメリットは「利便性が増す」です。
前のページに戻るボタンがあっても損することはないと思うので、ぜひ導入してみてください。
最後までお読み頂きありがとうございました。
少しでも参考になれば嬉しいです。
