retireSakiの日記

たぶん引退した?ソフトウエアエンジニアのブログ

はてなブログに「ページのトップに戻る」ボタンを追加する方法とカスタマイズの方法

 長い記事だと、ページのトップに戻ることが多々ありませんか?!
マウスのスクロールボタンで戻るのも面倒ですよね?!

そこで、利用者の利便性を向上させるために、ページトップに戻るボタンを追加することにしました。

ページのTOPに戻るボタン

 今回は、トモノリさんの下の記事を参考に

hatebumaru.hatenablog.com

スクリーン右下に、スムーズスクロールで「ページ上に戻る」ボタンを追加しました(^o^)v

ただし、使っているテーマと若干合わなかったので、
色合い、サイズ、位置の調整をしました(^^ゞ

全コードを下に掲載しましたので、各自で自分のテーマに沿った微調整を行ってください。
また、ボタンの形状の変更方法も記述しました。
ページのTOPに戻るボタン

① 設置は以下の3つのコードをコピペ。
② 設置したら、デザインのプレビューを見ながら微調整し、反映。
③ 反映後、実際にブログを表示して、最終調整。

以上で、完了ですね(^o^)v

設定→詳細設定→headに要素を追加

jQueryがhead似なかった別途追加してね(^^)/
最新バージョンならたぶん大丈夫だと思います。

jQueryの他に必要なフォントを以下で追加。
この中の1つをボタンとして使用します。


追加コード


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

デザイン→カスタマイズ→フッター に追加

"fa fa-chevron-circle-up fa-5x"が、使用するフォントです。

https://fontawesome.com/icons/chevron-circle-up?style=solid

これを変更することで、別のボタンを作成できます。

fontawesome.com

現在の表示位置が500ピクセルを超えたら、ボタンを表示するようになっています。
もし、変えたい場合は、"if (now>500){" の部分の500を変えます。

クリックしたら、遅いスピードでスクロールさせています。
もっと早くしたい場合は "slow" を ”normal” または ”fast” もしくはミリ秒単位に変更します。


追加コード


<!-- move to top -->
<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>
<!-- move to top -->

デザイン→カスタマイズ→CSSデザイン に追加

コメントの箇所をみて、微調整します!
font-size は、xx-small としていますが、x-small small のどれかで十分でしょう。
更に小さくしたい場合は、ポイント (pt) やピクセル (px) 指定します。


追加コード


/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
  font-size: xx-small; /* 追加 ボタンの大きさの調整 */
}
#move-page-top{
  color:rgba(0,150,0,0.4); /* ボタンのカラー RGBA */
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,150,0,0.6); /* マウスホバー時のカラー RGBA */
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -460px; /* 左右の位置調整 */
  }
}

以上です(^^♪
皆さんも、利用が使いやすいブログを目指していきましょう(^^)/

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

「Amazon.co.jpアソシエイト」または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。