はてなブログに「前のページ」ボタンを設置する(jQuery)

hatenaロゴ

はてなブログでは、カテゴリーや月別アーカイブの記事一覧には、前のページに戻るリンクがあるのですが、なぜか、トップページには、前に戻るリンクがなく、ブラウザの戻るボタンで戻るしかありません。

そこで、JavaScript(jQuery)で「前のページ」ボタンを設置してみることにしました。

まず、はてなブログで自動的に組み込まれるjQueryを強制的に先に読み込ませます。
(ブログのhead部分、ヘッダ、フッタのいずれかにコードを入力)

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

次に、上記jQueryの下に「前のページ」ボタンのスクリプト本体を設置します。
(デザイン設定→カスタマイズ→フッタにコードを入力)

<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>
    何もしない(「前のページ」ボタンを設置しない)場合
  • 自分のブログのリンク以外(検索やブックマーク)からきたとき
  • カテゴリーや月別アーカイブの記事一覧(はじめから「前のページ」ボタンがあるので)
  • 個別記事やトップページの1ページ目(アドレスに「?page=」がないページ)、aboutページ、「404 Not Found」のページ、検索結果のページ
    「前のページ」ボタンを設置する場合
  • 自分のブログのリンクからきたとき
  • トップページの2ページ目以降
  • ※ 「前のページ」ボタンのクリックでブラウザ履歴の1つ前のページに戻る処理を実行

このほか、ページャをボタン風にするために、CSSの設定が必要となります。
はてなブログのページャをボタン風に表示
はてなブログのページャをカスタマイズ

基本的にコピペしかできない素人が、わかってないで書いてるところがありますので、説明に間違いがあったらごめんなさい...。

参考にしたブログ・Webサイト
CATTAIL - はてなブログの「前のページへボタン」を表示する方法(jQuery)
IMUZA.com - はてなブログのトップページに「前のページ」を実装する
まろりかモンスター - はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】
Plain Note - 【はてなブログ】トップページの2ページ目以降に「前に戻る」を付ける

- 追記 -
「前のページ」に戻るボタンなんかいらないを書きました。