はてなブログに「ページのトップに戻る」ボタンを追加する方法とカスタマイズの方法
長い記事だと、ページのトップに戻ることが多々ありませんか?!
マウスのスクロールボタンで戻るのも面倒ですよね?!
そこで、利用者の利便性を向上させるために、ページトップに戻るボタンを追加することにしました。
今回は、トモノリさんの下の記事を参考に
スクリーン右下に、スムーズスクロールで「ページ上に戻る」ボタンを追加しました(^o^)v
ただし、使っているテーマと若干合わなかったので、
色合い、サイズ、位置の調整をしました(^^ゞ
全コードを下に掲載しましたので、各自で自分のテーマに沿った微調整を行ってください。
また、ボタンの形状の変更方法も記述しました。
① 設置は以下の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"が、使用するフォントです。
これを変更することで、別のボタンを作成できます。
現在の表示位置が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; /* 左右の位置調整 */ } }
以上です(^^♪
皆さんも、利用が使いやすいブログを目指していきましょう(^^)/
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2018/04/14
- メディア: 単行本
- この商品を含むブログを見る
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る