ブログ運営

はてなブログに【前のページ】ボタンを追加する方法

はてなブログに【前のページ】ボタンを追加する方法

こんばんは。

nanana-blog管理人のナナナです。

皆さんははてなブログの記事一覧に「前のページ」ボタンがないのは

知っていたでしょうか。先日自分のページを確認していたら、違和感を感じ、

何がおかしいかを探していたら 前のページボタンがないことに

気づきました。

設定漏れかと思い調べたところ、自分で設定をする必要があるようです。

本日は「前のページ」ボタンを追加する方法を記載していきます。

記事一覧に前のページボタンを追加する方法

ボタンを表示させるには、フッターにJavascriptを追加する必要があります。

ダッシュボード → デザイン → カスタマイズ → フッタ  に移動します。

f:id:nanana-blog:20190418231651j:plain

次のコードを貼り付けます。

>|Javascript|

<script type="text/javascript">
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対策
var span = document.createElement('span');
span.classList.add('pager-prev');
span.appendChild(a);
var element = document.getElementsByClassName("pager")[0];
element.insertBefore(span, element.firstChild);
}
</script>
||<

以下のサイトからコピーさせていただきました。

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

ページを確認すると無事前のページが表示されています。

f:id:nanana-blog:20190418231823j:plain

終わりに

いかがだったでしょうか。

普段自分のページを確認することはないのですが、今回のように自分でブログ

を確認することで、おかしな点が分かることがあります。

せっかく訪れてくれたユーザのためにも、もう少し頻繁に自分のブログに

アクセスして、ユーザが見やすいページを作っていきます。