ねずみ穴

新しいものが好き。健康を目指し、快適な生活を目指すノウハウ大部分の雑記ブログ

誰でも3つのコピペで超簡単にできる!!はてなブログで「戻るボタン」を入れるやり方

こんにちはサムです!!!!!

 

本ブログもようやくはてなブログProにして、やれやれと思ったところ、

 

「記事が最後まで行ったところで

 

上にマウスを使ってスクロールするのが

 

めんどくさっ!!」と常々思った次第、

 

「戻るボタン」をブログに挿入したので、今回そのやり方を教えます!!

 

戻るボタンとは??

 

f:id:dogwar:20180104173430p:plain

 

矢じるしで指している丸いところを押すと記事の頭まで一発で戻してくれるボタン

 

 今回やり方を参考にさせていただいたのは、 「Travel Banana」さん!!

 

www.travelbanana.net

 

なんと、たった3つのコピペ作業だけ!!

①ダッシュボード→デザイン→カスタマイズ→ヘッダー→タイトル下

 

以下HTMLをタイトル下欄にコピペしてね!

 

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

 

 

②フッター

 

以下HTMLをフッター欄にコピペしてね!

 

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

 

③デザインCSS

 

以下HTMLをデザイン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:35%;

    margin-right: -450px;

  }

}

 

 

たった3つの手順だけでブログに訪れた読者が快適になっちゃう!!

 

時間にして5分もかからない!!

 

 

もしも位置がずれてしまったら・・・

 

戻るボタンの左右の位置が変だなーというときには、下から4行目の 「right:35%」というところを調整してあげると変更ができますよ!