IMUZA.com

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

ホーム / javascript / はてなブログ:【決定版】記事一覧に「前のページ」ボタンを実装

はてなブログ:【決定版】記事一覧に「前のページ」ボタンを実装

2021/02/10 javascript, はてなブログ

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス(7)。

はてなブログではトップページから「次のページ」をクリックして進みますと、「前のページ」に戻るためのリンクがありません。この「前のページ」のリンクを作ろうという話です。

ただし、このボタンが必要と感じられるのは自分で自サイトを見る時くらいと思われます。通常、他のサイトの記事一覧を行ったり来たりすることはあまりないと思いますし、履歴でことは足ります。

  • 過去の試み
  • sessionStorage
  • Javascript
  • ライセンス等

過去の試み

なのに、なぜこんなにこだわるのか? 自分でもよくわかりません(笑)が、多分前回失敗したからですね。


  • はてなブログ:トップページに「前に戻る」を実装する(やや失敗)
  • はてなブログのトップページに「前のページ」を実装する
  • はてなブログに SessionStorage で「前のページ」を実装する

sessionStorage

やはり、どんどんと次のページへ進んでいくこともあるわけですから、その場合には前のページの URL をスタックにしてローカルに保存しておくしかなさそうです。

上の「過去の試み」の最初の sessionStorage を使う方法です。

developer.mozilla.org

Javascript

書き直しました。

  • ご使用になる場合は「ライセンス等」をお読みください
  • バグフィクスや改変に対応できなくなりますのでスクリプトは転載しないでください
(function(){
    if(document.body.classList.contains('page-index')){   // トップページ
        let pager = document.getElementsByClassName('pager')[0];
        if(pager !== undefined){    // pagerがあれば
            if(document.referrer.indexOf(location.hostname) !== -1){    // 自サイト内の移動なら
                let prevArray = [];
                if(location.search === ''){ // クエリなしトップページ
                    sessionStorage.removeItem('prevUrl');
                }else{ // クエリありトップページ
                    prevArray = JSON.parse(sessionStorage.getItem('prevUrl'));
                    const elemSpan = document.createElement('span'),
                        elemA = document.createElement('a');
                    elemSpan.classList.add('pager-prev');
                    elemA.textContent = '前のページ';
                    elemSpan.appendChild(elemA);
                    pager.insertBefore(elemSpan, pager.firstChild);
                    elemA.addEventListener('click', function(e){
                        e.preventDefault();
                        const href = prevArray.shift();
                        sessionStorage.setItem('prevUrl', JSON.stringify( prevArray ));
                        location.href = href;
                    }, false);
                }
        
                const next = document.getElementsByClassName('pager-next')[0];
                if (next !== undefined) {   // 次のページがあれば
                    const nextA = next.getElementsByTagName('a')[0];
                    const href = nextA.getAttribute('href');
                    nextA.addEventListener('click', function(e){
                        e.preventDefault();
                        prevArray.unshift(window.location.href);
                        sessionStorage.setItem('prevUrl', JSON.stringify( prevArray ));
                        location.href = href;
                    }, false);
                }                    
            }else{  // 検索やリンクできた場合は pager を消す
                pager.style.display = 'none'; 
            }
        }
    }
})();

ライセンス等

ご使用の場合は以下の注意事項をお守りください。

  • ライセンスは IMUZA.com にあります。
  • 当記事の Javascript を使用してのはてなブログ用テーマの制作、公開は商用以外は自由です。ただし、記事内、あるいは紹介サイト内に IMUZA.com へのリンクを挿入してください。
  • 当記事の CSS への改変、公開は自由です。
  • 特別問題が発生することはありませんが自己責任でお使いください。
    問題が発生した場合は削除すればもとに戻ります。
  • お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。

はてなブログ Perfect GuideBook 改訂第2版

はてなブログ Perfect GuideBook 改訂第2版

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: Kindle版

Adsenseは画像内のテキストも調べている
はてなブログ:テーマを変えた imzReading
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com