【はてなブログ】初心者でも簡単！上に戻るボタンを簡単に設置する方法

f:id:nekobuchou:20190325141107j:plain

こんにちはネコ部長です。

記事を読んでいて文字数が多いときに、トップページへ戻るボタンがあれば

とても便利です。しかし、残念ながらはてなブログにはそのような機能が

ありません。

そこでいろいろと調べてみたら、はてなブログでも設置できる方法が

ありましたので、さっそく設置してみました！

初心者の私でも簡単に設置することができましたので、導入を検討されて

いるかたにはおすすめです。

そこで今回は、簡単にトップページに戻るボタンを設置する方法を

紹介します。

設置の方法
まとめ

設置の方法

トップページに戻るボタンについてはいくつか公開されていましたが、

無知な初心者の私でもわかりやすく、とても参考になったブログ記事

がこちらでした。

hatebumaru.hatenablog.com

それではさっそく設置してみましょう。

手順１

　　　　　 f:id:nekobuchou:20190325150306p:plain

ダッシュボードの「設定」をクリックして、「詳細設定」→「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:nekobuchou:20190325152259p: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:nekobuchou:20190325152259p:plain

次は、「デザインCSS」をクリックして、下記のコードをコピペして

完了です。

/*上に戻る*/

#page-top {

  display:none;

  position:fixed;

  right:10px;

  bottom:20px;

  margin: 0;

  padding: 0;

  text-align:center;

}

#move-page-top{

  color:rgba(0,0,0,0.4);

  text-decoration:none;

  display:block;

  cursor:pointer;

}

#move-page-top:hover{

  color:rgba(0,0,0,0.6);

}

@media only screen and (min-width: 400px){

#page-top{

  right:50%;

  margin-right: -450px;

  }

}