はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】

はてなブログの記事一覧には「前のページ」ボタンが無いのはご存知でしょうか？

実際、「前のページ」ボタンがなくても、ブラウザの履歴で前に戻ればいいだけなのでそこまで困りませんが、
感覚的に「次のページ」ボタンがあるのに「前のページ」ボタンがないのは嫌なので、自分でどうにか追加することにしました。

どうにかイイ感じに「前のページ」ボタンを追加することができたので、
今回は、はてなブログへ「前のページ」ボタンを設置する方法について紹介したいと思います。

「前のページ」ボタンの設置方法

設置方法

「前のページ」ボタンの設置方法ですが、これから紹介するソースコードを
はてなブログのフッターHTMLに追加してあげればOKです。

はてなブログの「デザイン」 ⇛ 「カスタマイズ」 ⇛ 「フッタ」と進み、
紹介するソースコードを追加すればOKです。

ソースコード

JavaScriptのソースコードを以下に掲載します。

JavaScriptがわからない人でも理解できるように、
適宜ソースコードにコメントを付記しているので確認してみてください。

仕組みについてですが、URLに?page=という文字があったら記事一覧の2ページ目以降と判断して
「前のページ」ボタンを動的に挿入しています。

「前のページ」ボタンをクリックするとブラウザ履歴の一つ前のページに戻る処理を実行するようになっています。

もちろん、コピペして利用して頂いてOKですので是非ご利用くださいね。

                    
                        File: hatena-pager-prev.html
                        ----------------------------

                        <script type="text/javascript">
                            // 現在のページが記事一覧の2ページ目以降の場合処理実行
                            if (location.search.indexOf("?page=") === 0) {
                                // aタグの作成
                                var a = document.createElement('a');
                                a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
                                a.innerHTML = "前のページ"
                                a.setAttribute("href", "#"); // hrefがないとスタイルが崩れるので設定（onClickが処理されるよう#を指定）
                                a.setAttribute("rel", "prev"); // seo対策
                                // spanタグの作成（中に作成したaタグを入れる）
                                var span = document.createElement('span');
                                span.classList.add('pager-prev');
                                span.appendChild(a);
                                // classがpagerのdivタグに上記で作成したものを挿入する（classがpager-nextのspanタグよりも前に挿入する）
                                var element = document.getElementsByClassName("pager")[0];
                                element.insertBefore(span, element.firstChild);
                            }
                        </script>
                    
                

設置イメージ

「前のページ」ボタンの設置イメージを以下に載せました。

（スマホでスクリーンショットしたものを載せます）

なお、自分のブログのデザインに合うように、CSSでデザインをカスタマイズしてあります。

参考までに、関連するCSSを以下に掲載します。

                    
                        File: hatena-pager.css
                        ----------------------

                        /* Pager */
                        .pager {
                            position: relative;
                            margin: 2em 0;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: justify;
                                -ms-flex-pack: justify;
                                    justify-content: space-between;
                        }

                        .pager a {
                            color: RGB(68, 153, 187);
                        }

                        .pager a:hover {
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-prev {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-prev a {
                            padding: .5em 1em .5em 2em;
                        }

                        .pager.autopagerize_insert_before .pager-prev:before {
                            content: "<<";
                            font-weight: 900;
                            position: absolute;
                            left: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-next {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            margin-left: auto;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-next a {
                            padding: .5em 2em .5em 1em;
                        }

                        .pager.autopagerize_insert_before .pager-next:after {
                            content: ">>";
                            font-weight: 900;
                            position: absolute;
                            right: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.pager-permalink .pager-prev {
                            margin-right: .25em;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.pager-permalink .pager-next {
                            margin-left: auto;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }
                    
                

おわりに

はてなブログの記事一覧に「前のページ」ボタンを設置する方法を紹介しました。

はてなブログの設定として、フッタにJavaScriptを追加するだけなので簡単に設定することが出来ます。

今回紹介したJavaScirptのソースコードは自由にコピペして使って頂きたいので必要な方は是非ご利用くださいね。