はてなブログにコピペで出来る【上に戻るボタン】を付けてみました！

f:id:hoshico2525:20220131222514p:plain

前々から気になっていて付けたいと思っていた【上に戻るボタン】を付けてみました。

いろんな方のサイトを参考にさせてもらって挑戦したのですが、テーマと相性が悪いのか私のやり方がまずいのか？なぜか上手く反映されなくて違う感じで付いたり、文字だけだったり、なにも出なかったりしたのですが、こちらの⇓サイトの通りにやってみたら上手くいきました。

ありがとうございます。

www.gipsyjazznyumon.com

【上に戻るボタン】とはこれのことです。

f:id:hoshico2525:20220131181933p:plain

この画面右下の方にあるやつ。

これでページの先頭まで一気に戻れます。

それでは早速つけていきます。

1.　まずは設置コードを入れます

　　　　 f:id:hoshico2525:20220131182717p:plain

　管理画面の『設定』から『詳細設定』へ

　　 f:id:hoshico2525:20220131183104p:plain

『headに要素を追加』に次のコードを入れます。

2.　フッタにコードを入れます

　　　　 f:id:hoshico2525:20220131191450p:plain

管理画面の『デザイン』から①『カスタマイズ』→②『フッタ』に以下のコードを入れます。

<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>

③『変更を保存する』を忘れずクリック。

ちなみに2行目の以下の部分の　fa-5x　の5はサイズだそうでこのままだとPCの方は良いけどスマホの方が私はちょっと大きく感じて、文面が見えづらいきがしたので3に変えました。⇓

3.　デザインCSSにコードを入れる

上記③の『変更を保存する』をクリックしたらそのまま一番下の『｛｝デザインCSS』

に以下のコードを入れます。

　　　 f:id:hoshico2525:20220131192622p:plain

/*上に戻る*/
#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;
}
}