【はてなブログ】トップページの2ページ目以降に「前に戻る」を付ける

  • 投稿 : 2018-03-23

トップページの2ページ目以降は、なぜか「次へ」しかないような?!
アーカーブページの2ページ目には、「前へ」「次へ」がちゃんとあるような!?

仕様がどうなってるのかよくわかりませんが、トップページの2ページ目以降にも「前へ」というのを付けてみました。

hatena-pager-prev01.jpg

上手くいけば、こんな感じになるかと思います。

Javascript

<script>
// <![CDATA[
document.addEventListener('DOMContentLoaded', function(){
(function(){
    if(document.body.classList.contains('page-index')){
        if(location.href.indexOf('?page=') !== -1){
            var entries = document.getElementsByClassName('archive-entries')[0];
            var pager = document.getElementsByClassName('pager')[0];
            var elemSpan = document.createElement('span');
            var prev;
            if(document.referrer.indexOf(document.domain) !== -1) {
                prev = '<a href="#" onClick="history.back(); return false;">前のページ</a>';
            }else{
                prev = '<a href="/">ホーム</a>';
            }
            elemSpan.innerHTML = prev;
            elemSpan.classList.add('pager-prev');

            if (typeof pager === "undefined") {
               var el_div = document.createElement('div');
               el_div.classList.add('pager');
               el_div.classList.add('prev-only');
               el_div.appendChild(elemSpan);

              entries.parentNode.insertBefore(el_div, entries.nextSibling); 
            }else{
              pager.insertBefore(elemSpan, pager.firstChild);
            }
        }
    }
}());
}, false);
// ]]></script>

はてなブログのトップページに「前のページ」を実装する - IMUZA.com

上記を参考に作成しました。
上記のままだと、最終ページに「前のページ」というのが表示できないので、その処理を追加しています。
「 if (typeof pager === "undefined") {」あたりの部分がそうです。

CSS

/*pager-prev*/
.page-index .pager .pager-prev{
    width: 50%;
}
.page-index .pager.prev-only .pager-prev{
    width: 100%;
}
/*pager-next*/
.page-index .pager .pager-next{
    width: 100%;
}
.page-index .pager .pager-prev + .pager-next{
    width: 50%;
}

参考:隣接兄弟結合子 - CSS | MDN

1つの時と2つの時は、上記のような感じでCSSで切り分けてます。幅が50%の時は2つ並んでいる時です。

スポンサーリンク