はてなブログに「前のページ」ボタンを設置する(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 type="text/javascript">
$(function() {
    if(document.referrer.indexOf(document.domain) !== -1) { /* 自分のブログからきたら↓ */
        if(!(document.URL.match('archive'))) { /* カテゴリーや月別アーカイブ以外なら↓ */
            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').length) { /* 次のページボタンがあったら↓ */
                    $('.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=」がないページ)
    「前のページ」ボタンを設置する場合
  • 自分のブログのリンクからきたとき
  • トップページの2ページ目以降
  • 検索結果(サイドバーの検索ボックスの結果)のページ
  • ※ 「前のページ」ボタンのクリックでブラウザ履歴の1つ前のページに戻る処理を実行

このほか、CSSの設定(はてなブログのページャをボタン風に表示)も必要となります。

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

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