【はてなブログ】便利な「上へ戻る（トップに戻る）ボタン」の設定（コピペで簡単３ステップ）
「上へ戻るボタン」をはてなブログに設置しよう
こんにちは。ぴよこママです。
今回は、「上へ戻るボタン」の設置方法です。
長いブログを読んでいる時、
最初の方の内容を見返したり、目次に戻ったりしたいけどスクロールするのは面倒・・・と思ったことはないですか？
そんなときに便利なのが上へ戻るボタンです。
ページをスクロールする際も常に右下（のことが多い）に表示されていて、押すとしゅるしゅるっとページのトップに戻る、あいつです。
上へ戻るボタンのデザイン（完成図）
そのままコピペするとこんなデザイン＆色になります。
必要な作業
以下の３ステップです。
２．フッタへのHTMLコード貼り付け
３．HEADへ要素を追加へのHTMLコード貼り付け
色の変更なしならコピペのみで完了なので簡単ですね！
ではいってみましょう🤍
デザインCSSに貼り付けるコード（コピペ可）
管理画面（記事の管理）から、デザイン＞カスタマイズ（スパナマーク）＞デザインCSS（一番下）に以下コードを貼り付けてください。
/*上へ戻るボタン*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#20b2aa;/*★アイコンの色*/
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:#5f9ea0;/*☆カーソルが当たった時の色*/
}
@media only screen and (min-width: 400px){
#page-top{
right:70%;/*表示位置*/
margin-right: -450px;
}
}
アイコンの色と、カーソルが当たった時の色はそれぞれこんな感じです。
★アイコンの色
☆カーソルが当たった時の色
コードにコメントがある部分の#から始まるカラーコード部分をお好きな色に変更して使ってください！
（カラーコードを探す際、私はWEB色見本 原色大辞典 - HTMLカラーコードをよく使わせてもらっています。）
また、アイコンの表示位置を変えたい場合はコメントをつけている@media only screen and〜内の「right:50%」で調整してください。
フッタのHTMLに貼り付けるコード（コピペ可）
次はフッタの設定です。
先程の「デザインCSS」の一つ上にあるフッタに以下のソースを貼り付けます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-4x"></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>
FontAwesomeの追加も忘れずに
上へ戻るボタンのアイコンを表示するにはFontAwesomeの設定が必要です。
管理画面（記事の管理）＞詳細設定＞headに要素を追加に以下のコードを貼り付けてください。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
注意１：ブログトップには上へ戻るボタンは表示されない！
ブログのトップ（当ブログの場合は「ぴよこママの資産うんぬん」）には上へ戻るボタンは表示されません。個別の記事内で表示されるので、確認する際はご注意ください。
注意２：一定量スクロールしないと表示されない！
個別記事内であっても、一定量スクロールしないと上へ戻るボタンは表示されません。
ページトップに上へ戻るボタンがあっても意味がないので、少しスクロールしてから表示されるようになっています。
うまく表示されない場合
上記設定で上手く表示されない場合は以
下２つを試してみてください。
FontAwesomeの別バージョンの追加
管理画面（記事の管理）＞詳細設定＞headに要素を追加に以下のコードを貼り付けてみてください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
デザインCSSの記述箇所の変更（コードを上の方に持っていく）
すでにデザインCSSが記述されている場合、記述順序が影響している可能性があるので、コピペの場所を上の方に変更してみてください。
※私は、デザインCSSの冒頭に記述しています。
最後に
以上が上へ戻るボタンの設定方法でした。
ボタンを設置することで、長めの記事を書いても見やすくなると思います。
＜上へ戻るボタンを設定するに当たって参考にさせていただいたサイト＞（ありがとうございます✨）
はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法 – パソコンガイド
おまけ。他のはてなブログ設定：見出し（大中小）のカスタム
見出しのカスタム方法も紹介しています。よければご覧ください。
では！
