はてなブログ・スクロールすると表示されるページのトップに戻るボタンを設置

2019年11月17日はてなブログ

はじめに

※当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

ページのトップに戻るボタンを設置

ページをスクロールしていくとページ右下に「ページのトップに戻るボタン」を設置して、ページトップにすぐに戻れるようにするカスタマイズです。

こういうボタンです。

カスタマイズは下記サイトを参考にさせていただきました。

フッタ

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「フッタ」に以下のコードを貼り付けてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が500を超えた場合
if ($(this).scrollTop() > 500) {
$('#pagetop’).fadeIn(“slow");
} else {
// ページトップへをフェードアウト
$('#pagetop’).fadeOut(“slow");
}
});
// ページトップクリック
$('#pagetop’).click(function() {
// ページトップへスクロール
$('html, body’).animate({
scrollTop: 0
},"slow");
return false;
});
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>

コードの中の赤字の数字を変えることによって、どれだけスクロールしたらボタンが表示されるか調節できます。

500だと早めに表示されるので、1000とか1200ぐらいでもいいかもしれません。

皆さんのお好みで調節してください。

デザインCSS

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に以下のコードを貼り付けてください。

/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#dcdcdc;
text-align:center;

}

/* ページトップへ戻るボタン:ホバー時 */
#move-page-top:hover{
color:rgba(0,0,0,0.8);
}

これだけで割と簡単に「ページのトップに戻るボタン」を設置できます。

レスポンシブデザイン対応なら、この設定だけでスマホにも表示できます。

ただ、お使いのデザインテーマによっては動作しないことがあるかもしれません。