はてなブログカスタマイズ【上(TOP)に戻るボタン】を表示させる方法とは！？

はてなブログでTOPに戻るボタン設定紹介アイキャッチ画像

ブログを読んでいて

長い文章を最後まで読んだ後、

またTOPに戻って読みたい！という時

スクロールで戻るのは面倒くさいですよね。

一気に上（ＴＯＰ）に戻ってくれたら嬉しいです。

今回は記事の最後に

上（ＴＯＰ）に戻るボタンを表示させる様にしたいと思います。

headに要素を追加にコードを貼り付ける
フッタにコードを貼り付ける
ＣＳＳにコードを貼り付ける
色を変更する

headに要素を追加にコードを貼り付ける

１、下のコードを「head に要素を追加」へ貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

２、「ダッシュボード」➡「設定」➡「詳細設定」を開く。

はてなブログの設定画像

３、「<head>要素にメタデータを追加」に貼り付けます。

はてなブログのHeadに要素を追加画像

４、１番したまでスクロールして「変更する」をクリック。

はてなブログの詳細設定を変更するの画像

フッタにコードを貼り付ける

１、 下のコードをフッタに貼り付けます。

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

２、「デザイン」➡「カスタマイズ（スパナマーク）」➡「フッタ」と開いて③にコードを貼り付ける。

はてなブログのフッタ変更の画像

続けて、、、

ＣＳＳにコードを貼り付ける

１、ＣＳＳに下のコードを貼り付ける

/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(246, 135, 116, 1);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0, 0, 0, 6);
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
}