【はてなブログ】前のページに戻るボタンを表示する方法【コピペでOK】

こんにちは祐(@yuu304810)です。

 

今回は『前のページに戻るボタンを表示する方法』について、解説していきます。

 

下記が完成イメージです⇩

 

f:id:yuu304810:20210902061857j:image

 

使用しているテーマによって、デザインが若干異なる場合がございます。

 

とくに難しい作業や、専門知識は必要ないので、ぜひ参考にしてみてください。

 

この記事で得られる情報

・前のページに戻るボタンを表示するメリット
・前のページに戻るボタンの表示方法・手順

 

前のページに戻るボタンを表示するメリット

 

f:id:yuu304810:20210305065148p:plain
A子さん
前ページに戻るボタンを表示するメリットはあるのでしょうか? 
利便性が増します。 
f:id:yuu304810:20210305065242p:plain

 

なぜか『はてなブログ』の記事一覧(トップページ)には『次のページに進むボタン』しか表示されていないんですよね。

 


「どんな記事があるんだろ〜」次へ進む(ポチッ)
「あっ、さっきの記事の方が気になるなぁ・・・」
「戻ろ〜っと(あれ?)」

戻るボタンがないッ!!!!!

 

不便すぎませんか?

 

そんな状況を前のページに戻るボタンを設置することで防ぐことができます。

 

ぜひ導入してみてください。

 

前のページに戻るボタンを表示する手順

 

①ダッシュボードの【デザイン】を選択

②【カスタマイズ(スパナマーク)】を選択

③【フッタ】を選択

④これから紹介するコードを貼り付ける

 

前のページに戻るボタンを表示する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です。

 

これで、前に戻るボタンを表示することができます。

 

まとめ

 

前のページに戻るボタンを表示するメリットは「利便性が増す」です。

 

前のページに戻るボタンがあっても損することはないと思うので、ぜひ導入してみてください。

 

最後までお読み頂きありがとうございました。

 

少しでも参考になれば嬉しいです。

 

 

参考元:https://simadzu.hatenablog.com/entry/hatena-pager-prev

トップへ戻る