コピペで簡単はてなブログに「ページの一番上へ戻る」ボタンを設置する方法

f:id:masa5care:20180521190844j:plain

どうも、マサ（@masa5care）です

時間があればブログの利便性を上げるためにカスタマイズをちょこちょこ進めておりまして、先日は「この記事は何分で読めます」設置について書かせていただきました

CHECK

コピペで簡単はてなブログに「この記事は何分で読めます」を設置する方法

今回は「ページの一番上へ戻る」ボタンの設置です

長い文章だったらなおさらほしい一番上へ戻るボタン、例のごとく設置方法はいたって簡単です

私のことですから、簡単に設置できるものしかしません、てかできません

ではどーぞ

「一番上へ戻る」ボタンの必要性
設置手順
- デザインCSS
- フッタ
最後に

「一番上へ戻る」ボタンの必要性

記事を読みながらブログの下までスクロールしました、その後は特にフッターに手を加えていなければだいたい他のサイトへ行ってしまわれます

フッターもおいおい弄っていきますが、まずは「一番上へ戻る」ボタンの設置からやってみました

↓こういうやつ

f:id:masa5care:20180521174444j:plain

ボタン一発でそのページの一番上へ戻ってくれれば、目次を見てもう一度読みたい場所へ行ってもらえたり、他の記事へ足を運んでもらいやすくなるわけです

長い記事だったらなおさらですよね

あれ、さっきなんて書いてあったっけ
これなんていうブログやったっけ
SNSやってはるんやろか
上の方にプロフィールあったよな

こんなときスマホだったら狂ったようにフリックしまくったり、パソコンならマウスホイールぶん回して先頭まで戻るのはいただけないわけです

鬼のように存在するブログの中、せっかく来ていただいたんですから、せめてうちのブログに居てる間はできるだけ使い勝手をよくしておきたいところです

また来ようかなと思ってもらえるかもしれませんし、Googleの評価も上がるらしいですよ

では、早速設置してみます

設置手順

こちらのブログを参考にさせていただきました

コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ – つばさのーと

コピペで簡単です、下記2箇所に特定のコードを貼り付けるだけです
コピペする場所に元々何か入っている場合は、その一番下に追記する形で追加してください

デザインCSS

「デザイン」→「カスタマイズ（スパナアイコン）」→「デザインCSS」に下記のコードをコピペしてください

ボタンの色や表示位置などの指定をしています

/* ページトップへ戻るボタン */
#page-top-area {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}
#page-top-button {
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    display: block;
    cursor: pointer;
}
#page-top-button:hover {
    color: rgba(0,0,0,0.95);
}

フッタ

「デザイン」→「カスタマイズ（スパナアイコン）」→「フッタ」に下記のコードをコピペしてください

スクロール量によってボタンを表示させたり、消したりしているプログラムです

ここまで読み進んでもらってますと、恐らく右下に丸いアイコンが表示されているはずです
あんなアイコンが表示されます

<div id="page-top-area">
    <a id="page-top-button"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>

<script>
(function($) {
$(function() {
var $w = $(window), $pageTopArea = $('#page-top-area'), isShow = false;
setInterval(function() {
    if ($w.scrollTop() > 500) {
        if (!isShow) {
            isShow = true;
            $pageTopArea.fadeIn();
        }
    } else {
        if (isShow) {
            isShow = false;
            $pageTopArea.fadeOut();
        }
    }
}, 1000 / 30);
$('#page-top-button').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
});
});
})(jQuery);
</script>