はてなブログの記事一覧には「前のページ」ボタンが無いのはご存知でしょうか?
実際、「前のページ」ボタンがなくても、ブラウザの履歴で前に戻ればいいだけなのでそこまで困りませんが、
感覚的に「次のページ」ボタンがあるのに「前のページ」ボタンがないのは嫌なので、自分でどうにか追加することにしました。
どうにかイイ感じに「前のページ」ボタンを追加することができたので、
今回は、はてなブログへ「前のページ」ボタンを設置する方法について紹介したいと思います。
「前のページ」ボタンの設置方法
設置方法
「前のページ」ボタンの設置方法ですが、これから紹介するソースコードを
はてなブログのフッターHTMLに追加してあげればOKです。
はてなブログの「デザイン」 ⇛ 「カスタマイズ」 ⇛ 「フッタ」と進み、
紹介するソースコードを追加すればOKです。
ソースコード
JavaScriptのソースコードを以下に掲載します。
JavaScriptがわからない人でも理解できるように、
適宜ソースコードにコメントを付記しているので確認してみてください。
仕組みについてですが、URLに?page=
という文字があったら記事一覧の2ページ目以降と判断して
「前のページ」ボタンを動的に挿入しています。
「前のページ」ボタンをクリックするとブラウザ履歴の一つ前のページに戻る処理を実行するようになっています。
もちろん、コピペして利用して頂いてOKですので是非ご利用くださいね。
設置イメージ
「前のページ」ボタンの設置イメージを以下に載せました。
(スマホでスクリーンショットしたものを載せます)
なお、自分のブログのデザインに合うように、CSSでデザインをカスタマイズしてあります。
参考までに、関連するCSSを以下に掲載します。
おわりに
はてなブログの記事一覧に「前のページ」ボタンを設置する方法を紹介しました。
はてなブログの設定として、フッタにJavaScriptを追加するだけなので簡単に設定することが出来ます。
今回紹介したJavaScirptのソースコードは自由にコピペして使って頂きたいので必要な方は是非ご利用くださいね。