ハウリンの雑念だらけで生きている

はてなカスタマイズや旅行記、好きな事(サブカル)などを書いていきたいです。ゆるゆると書いていきます。

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


スポンサーリンク

f:id:twistinhaurin:20201120154506p:plain

こんにちは、ハウリンです (*^^*)

ブログを読んでいて

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

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

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

一気に上(TOP)に戻ってくれたら嬉しいです。

 

今回は記事の最後に

上(TOP)に戻るボタンを表示させる様にしたいと思います。

 

 

 

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>

 

 

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

f:id:twistinhaurin:20201121145422p:plain

 

「head に要素を追加」に貼り付けます。 

f:id:twistinhaurin:20201121145503p:plain

 

 

「変更する」をクリック。

f:id:twistinhaurin:20201121145516p: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>

 

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

f:id:twistinhaurin:20201121150757p:plain

 

続けて!
 

CSSにコードを貼り付ける 

CSSに下のコードを貼り付ける

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

 

 

フッタの下の「デザインCSS」をクリック➡にコードを貼り付けます。

f:id:twistinhaurin:20200623151409p:plain

 

 

「変更を保存する」をクリック。

f:id:twistinhaurin:20200522165623p:plain

 

 

これで記事をスクロールすると・・・

f:id:twistinhaurin:20201121152113p:plain

こんなマークが表示される様になったと思います(*^^*)

 

 

色を変更する 

color:rgba(246, 135, 116, 1); の数字の部分を変えます。

緑にしたかったらcolor:rgba(5, 230, 8, 1); で

f:id:twistinhaurin:20201121160122p:plain

青にしたかったらcolor:rgba(5, 121, 230, 1);  で

f:id:twistinhaurin:20201121160618p:plain

こうなります。

 

18行目のcolor:rgba(0, 0, 0, 6); の数字は

カーソルを合わせた時の色です。

 

こちらで⇩カラー見れます。

www.hexcolortool.com

 

以上こちらのサイトを参考にさせて頂きました。

www.gipsyjazznyumon.com

 

あとがき

上に戻るボタンは、ユーザーにとってかなり便利かと思います。

私の場合、毎回カスタムする時、

カラー選びでかなりの時間費やしてしまいます(^_^;)

記事に合ったカラーが見つかるといいですね。

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。