はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法
文字数が多くなり、記事が長くなると「トップページに戻る」ボタンがあると瞬時にトップページ（記事上）に戻れるのでとても便利です。
設置すればブログを読んでくれる読者のためにも便利になります。
WordPressではテーマに標準装備されているか、下記のようなWordPressプラグインを追加することで簡単に「トップページに戻る」ボタンを設置することができます。
はてなブログの一部のブログでブログの下までスクロールすると「TOPへ戻る」というボタンが出てくるのを見かけます。
同様にこのブログ（はてなブログ）でも導入したいと思いました。
しかし、はてなブログの設定画面をみても、そのようなボタンの設定がないので標準の機能ではないようです。
そこで検索してみたら、とても簡単な設置方法を公開されていたので早速導入してみました！
はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法
参考にしたのは下記のブログを参考にさせていただきました。とても分かりやすくて簡単に設置することができました。ありがとうございます！
コードをコピーしてペースト
以下、3つのコードをそれぞれ指定の箇所にコピー＆ペーストするだけで簡単に設置することが可能です。
<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>
はてなブログ管理画面⇢「設定」⇢その中の「詳細設定」をクリック⇢「headに要素を追加」欄に上記のコードをコピー＆ペーストしましょう。
<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>
次に、はてなブログ管理画面⇢「デザイン」⇢「カスタマイズ（スパナのマーク」⇢「フッター」欄で上記のコードをコピー＆ペーストしましょう。
/*上に戻る*/
#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;
}
}
最後に、はてなブログ管理画面⇢「デザイン」⇢「カスタマイズ（スパナのマーク」⇢「デザインCSS」欄で上記のコードをコピー＆ペーストしましょう。
上記のブログの手順どおり進めれば導入はできます。
ただし、利用しているテーマによっては、「トップページに戻るボタン」の位置が変なところに表示されてしまう場合があります。
このブログで利用している、はてなブログデザインテーマ「DUDE」ではボタンの位置が、きちんと右下にならずにとても離れた位置になるので、「DUDE」では上記の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;
}
}
下から4行目のright:50%をright:35%にしたら、ちょうど良い位置にすることができました。
利用しているテーマによって、その数値を変えて微調整すれば良いと思います。
おわりに
参考サイトのおかげで超簡単に「トップページに戻る」ボタンを設置することができました。
たったこれだけのコードを追記するだけで表示できるのは手軽かつ簡単でいいですね。
ほとんどの方は知っているかもしれませんが、私みたいな、はてなブログ初心者ユーザーのためにと、自分の備忘録として記事にしてみました。
