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

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

 こんばんは。

 

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

 

 

終わりに

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

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

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

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

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