IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

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

unsplash-logoFrankie

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

2018.03.09 はてなブログ, カスタマイズ

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

はてなブログのトップページって、「全文形式」にしろ「一覧形式」にしろ、次のページへ飛びますと「前のページ」のリンクがなく、ブラウザの戻るで戻るしかないですよね。

なぜなんですかね？ 必要ないですか？

ブラウザにマウスジェスチャーを入れていればさほど気にはなりませんが、「前のページ」を実装する方法を考えてみました。

01SessionStorage での実装

実は、以前同じことを考え、SessionStorage を使う方法で実現させたことがあります。

www.imuza.com

苦労した結果ではありますが（笑）、考えてみれば history.back() を使ったほうが手っ取り早いですね。

02history.back() での実装

まず、ページャーの html ソースを見てみます。

<div class="pager autopagerize_insert_before">
  <span class="pager-next">
    <a href="http://ドメイン/?page=10桁の数字（記事のID？）" rel="next">次のページ</a>
  </span>
</div>

こうなっていますので、pager-next の前に

  <span class="pager-prev">
    <a href="#" onClick="history.back(); return false;">前のページ</a>
  </span>

を挿入すればいいはずです。

前のページがない場合

ただ、いくつか問題があります。まず、最初にホームを表示した場合には前のページがありませんので、挿入しないようにしないといけません。この場合は、ページの url をみてクエリパラメーターがあるかないかで分岐しましょう。

location.href.indexOf('?page=') が -1 ならサイトのホーム

検索やブックマークからきた場合

トップページの２ページめや３ページ目が Google にインデックスされたり、どこかでブックマークされることもありそうです。この場合も他のサイトに戻ってしまいます。この場合は、リファラをみて自分のサイトかどうかで分岐しましょう。他のサイトから来たのであればホームに飛ばすしかなさそうです。

document.referrer.indexOf(document.domain) が -1 なら他のサイトから来た

「前のページ」を実装する Javascript

こうなりました。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        if(location.href.indexOf('?page=') !== -1){
            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')
            pager.insertBefore(elemSpan, pager.firstChild);
        }
    }
}());
</script>
  • ホームの場合は「前のページ」を表示しません
  • 「次のページ」をクリックして移動した場合は前のページに戻ります
  • 他のサイトから来た場合は「ホーム」を表示しホームに戻ります

03サンプル CSS

 }
.page-index .pager-prev,
.page-index .pager-next {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
  background: #afb364;
  text-align: center;
  border-radius: 70px;
  margin: 0 10px;
  transition: all 500ms;
  color: #fff; }
  .page-index .pager-prev::before,
  .page-index .pager-next::before {
    font-family: blogicon;
    font-size: 40px;
    line-height: 70px; }
  .page-index .pager-prev:hover,
  .page-index .pager-next:hover {
    background: #747827;
    color: #afb364; }
  .page-index .pager-prev a,
  .page-index .pager-next a {
    text-indent: -9999px;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
.page-index .pager-prev::before {
  content: "\f005"; }
.page-index .pager-next::before {
  content: "\f006"; }

上の CSS が適用された画像です。「次のページ」にマウスオーバーした状態です。

#javascript, #はてなブログ

Twitter
Facebook
ブックマーク
LINEで送る