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

はてなブログPro の記事一覧。

「次のページ」はあるのですが「前のページ」ボタンがありません。

ブラウザの履歴で戻れば事足りますが、ちょっと格好悪いですね。

Google 先生に聞いてみると、簡単な解決策が見つかりました。

という事で実装してみましたので、備忘録として残します。

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

「デザイン」→「カスタマイズ」→「フッタ」へ移動し、以下のコードをコピペします。

前ページボタンの記述

<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>

こんな感じになります。↓

ボタンの見栄えを良くする方法

「デザイン」→「カスタマイズ」「デザイン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;
}

こんな感じになります。↓

 ちょっと格好良くなってますが、囲みのサイズ調整の仕方が分かりません。

文字幅と同じくらいのサイズにできると良いですが、それは今後の対応という事で。

今回のカスタマイズもコピペのみで実施しました。

今回参考にさせて頂いたのはこちらのサイト。

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

ありがとうございました。

↓ ランキングに参加しています。よろしければポチッとして下さい。