どんブログ

日常とたま〜に絵やお役立ち情報を載せたいブログです。

MENU
トップ > Webサイト構築 > CSS・HTML｜記事一覧に「前のページ」を追加しよう（レスポンシブ）

CSS・HTML｜記事一覧に「前のページ」を追加しよう（レスポンシブ）

Webサイト構築 Webサイト構築-はてなブログ CSS／HTML

おはこんばんちは。

 

本日は自ブログのコーディング備忘録、記事下にある「前のページ」、「次のページ」ボタンについて記していきます。

これね。

これ自分はデフォルトテーマで前・次で両方ついてるものかと思ったので、延々と「次のページ」しか無かったことに面食らいました。今の時代はあんま必要とされてないのかもしれん・・・？うーん、カルチャーショック。

個人的にはなんとなく次があるなら前もある方がバランスいいなと思ったので、追加しました。

 

こんな方に読んでもらえれば嬉しい
  • はてブに「前のページ」ボタンを追加したい
  • 無料テーマでもそれっぽい見た目にしたい

 

 

はてなブログのデフォルトテーマ「Smooth」を使用

まず前提として使用しているテーマですが、デフォルトテーマの「Smooth」です。

シンプルイズベスト。

 

1.スクリプトをフッタのHTML欄に記述

はてブの管理画面から「 デザイン」→「 カスタマイズ」→「 フッタ」へ進み、HTML欄に下記を記述する。

スクリプト｜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", "javascript:void(0);");
        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>

「前のページ」をクリックすると、ブラウザ履歴の一つ前のページに戻る処理をする、という記述。らしいです（ぇ・・・

 

2.CSSでボタンのデザインを変える

はてブの管理画面から「 デザイン」→「 カスタマイズ」→「 デザインCSS」へ進み、下記を記述する。

CSS｜デザインCSSに記述

  • /* 前のページ次のページ */
    .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.autopagerize_insert_before .pager-prev:before {
        content: "\f005"; font-family: blogicon;
        font-weight: 900;
        position: absolute;
        left: .5em;
        top: 1em;
    }


    .pager.autopagerize_insert_before .pager-next:after {
        content: "\f006"; font-family: blogicon;
        font-weight: 900;
        position: absolute;
        right: .5em;
        top: 1em;
    }

後述する参考サイト様のCSSから色々変更しました。現状はデフォルトのボタンデザインのままだけどちょっと今はコーディングのやる気が失せているので気が向いたらブログ全体のデザインに合わせてみようかネ。

 

補足

CSSを記述してもデザインが反映されない場合は、単純に他のデザインコードよりも上の方に記述してみてね。上から順番に優先順位が高いよ。

 

というわけでひとまず、

 

完成‼️🎉

お疲れ様ですた。

 

参考サイト様

www.marorika.com

かみさまありがとう。

 

ほいでは今日はこのへんで、さいなら〜ﾉｼ