はてなブログにトップへ戻るボタンを設定する方法

はてなブログのカスタマイズ記事第3段。今回はブログのTOPへ戻るボタンの設置方法を紹介します。

記事を読み終わったあとにページの上へ戻りたいときにボタンひとつで戻れるようにする機能です。ほとんどのブログで実装されているのですがはてなブログではカスタマイズしないと設置ができないので自分でカスタマイズして設置しましょう。

実際設置したページはこちら

はてなブログサンプルページ

Contents

トップへ戻るボタンの設定方法

トップへ戻るボタンの設定方法

設定方法はコードをコピーすればできる簡単な方法です。何個か設置の方法がありましたが、一番動き方が好きだった jQuery（ジェイクエリー）を使った設置方法を紹介します。

目次のカスタマイズでも jQuery（ジェイクエリー）を使っているのでカスタマイズでは活用する仕組みですね。

今回のカスタマイズはコドダマウェブさんを参考に少しカスタマイズして利用ました。3つのステップで紹介していきます。

[1] アイコンのスタイルシートの設定

TOPへ戻るボタンの矢印などのアイコンを外部のサイトから読み込む為の設定です。怪しいな？とか思うかもしれませんが、多くのWebサイトがアイコンを外部から読み込んで利用しているので安心して作業してくださいね。

下の画像のようなアイコンを読み込む設定になります。

このコードをコピーして管理画面に貼り付けます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">

設定場所はこちら

管理画面の設定
詳細設定の中にあります

下の方にスクロールしていくと「検索エンジン最適化」の項目があるのでその中の「headに要素を追加」欄に貼り付けてください。

最後に一番下で保存してね。

次は動きの設定です。

[2]動作の設定

動きの設定を行います。下のコードはどれくらい下にスクロールしたら表示するか、何秒でTOPに戻るかを設定しています。

/*--------------------------------------
TOPに戻るスクロール
--------------------------------------*/
jQuery(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) { //100pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
});
</script>

このコードの貼り付け場所は管理画面のデザインから選択します。

フッタの中に貼り付けます。

カスタマイズを選択
フッタを選択
入力欄があるのでコードを貼り付けます
変更を保存をクリック

次が最後の設定です。

[3]CSSの設定

最後にデザインや幅の設定です。サイズや幅、色など変えれば自分のオリジナル設定ができますよ。

/*--------------------------------------
TOPに戻るスクロール
--------------------------------------*/
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #333;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 40px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f0d8';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

先ほどと同じデザインの設定画面の中のデザインCSSで設定します。