【はてなブログ】「トップへ戻る」ボタンをつけてみた
最近、ちょっとずつブログカスタマイズにハマってきました。記事のカテゴリー整理などはまだまだですが、本のレビューなどを書くようになると、記事全体が長くなり、トップに戻るのが面倒になることが顕在化してきました。そこで、かっこいいブログによくある「トップにもどる」的なボタンの導入を試みました。結果としては、こんな感じ。
参考はこの辺の方々から。
nohack-nolife.hatenablog.com
アイコン使うならこちらから
azanaerunawano5to4.hatenablog.com
アイコンについては、以前の記事で使い方がわかりました。
demacassette2.hateblo.jp
実際に変更したところ
実際に設定を変更したところは以下の通りです。
記事のフッタ部分
ダッシュボード→デザイン→カスタマイズ→フッタ
//トップに戻るボタンの設定 <div id="page-top"> <a id="move-page-top"><i class="fa fa-arrow-circle-o-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>
これをコード書く部分にコピペ
トップにもどるボタンは、を使っています。
<i class="fa fa-arrow-circle-o-up fa-5x"></i>
大きさは、数値を変えると変えられます。
fa-4x fa-3x fa-2x fa-1x
はてなブログで用意されているアイコンを使うのもありです。
<i class="blogicon-chevron-up fa-3x"></i>
詳しくはこちら
wedges.hatenablog.com
デザイン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.6); text-decoration:none; display:block; cursor:pointer; } /* ページトップへ戻るボタン:ホバー時 */ #move-page-top:hover{ color:rgba(0,0,0,0.8); }
これをコピペ
以上で、記事の下の方まで行ったら、上に戻るボタンが出てきて、クリックするとにゅるっとトップに戻ります。