こんにちはサムです！！！！！
本ブログもようやくはてなブログProにして、やれやれと思ったところ、
「記事が最後まで行ったところで
上にマウスを使ってスクロールするのが
めんどくさっ！！」と常々思った次第、
「戻るボタン」をブログに挿入したので、今回そのやり方を教えます！！
戻るボタンとは？？
矢じるしで指している丸いところを押すと記事の頭まで一発で戻してくれるボタン
今回やり方を参考にさせていただいたのは、 「Travel Banana」さん！！
なんと、たった３つのコピペ作業だけ！！
①ダッシュボード→デザイン→カスタマイズ→ヘッダー→タイトル下
以下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;
}
}
たった３つの手順だけでブログに訪れた読者が快適になっちゃう！！
時間にして5分もかからない！！
もしも位置がずれてしまったら・・・
戻るボタンの左右の位置が変だなーというときには、下から4行目の 「right:35%」というところを調整してあげると変更ができますよ！