A Sky Blue Diary~想いをかたちに~

  日々の雑感や出来事を書き綴っています

【はてなブログ】ブログにTOPに戻るボタンを表示するようにしました

みなさん、こんにちは。みっくんです。

ブログに訪問していただきまして、

ありがとうございます。

 

今回は、ブログにTOPに戻るボタンを

表示するようにしたいと思います。

 

目次

 

前から、思っていたのですが、

ブログやサイトを見た時に、

右下の方に、TOPへ戻るボタンが

設置されてることがありますよね。

 

あれって、便利だなと思っていました。

 

僕は、見る度に、よく使っていました。

 

あれって、どうするのかなあと思って、

Yahoo!検索で調べてみました。

 

あのボタンの名前がわからなかったので、

 

はてなブログで下から上に戻るボタンを設置する方法

 

と入力して、検索してみました。

 

すると、たくさん、そのことについて、

書いてある記事がヒットしました。

 

その中で、僕は、

以下の2つのサイトを参考にさせていただきました。

 

account-it-dentist.hatenablog.com

 

www.task-notes.com

 

初め、他のサイトのものを

やってみたのですが、

表示されなくて、

次に上記2番目のサイトのTOPに戻るボタンを

表示させるようにしたら、

上手く行きました。

 

色々サイトがあったのですが、

この上記2番目のサイトの方法を採用した理由は、

TOPに戻るボタンのデザインがよかったからです。

 

他のサイトのものも見ましたが、

気に入るデザインのものがなくて、

こちらのサイトで表示されているデザインが

よかったので、これにしました。

 

ところが、上記2番目のサイトのものは、

httpがコードの中にあったので、

他のものを探した所、

1番目のサイトを見つけました。

 

これから、紹介する方法は、

2つのサイトのものを組み合わせた方法です。  

 

はてなブログでTOPに戻るボタンを表示する方法

それでは、実際にどうするか、

紹介したいと思います。

 

方法は、上記2つのサイトの内容を

まとめました。

 

コードは、上記2つのサイトで

紹介されているものと同じです。

 

これらを追加すると、

僕のブログに表示されているボタンと

同じものが表示されます。

 

参考にしてみてください。

 

1.headに要素を追加の欄に以下のコードを追加する

設定から詳細設定に移動して、

headに要素を追加の欄に

以下のコードを追加してください。

 

僕が追加した際は、以下のコードを

そのままコピペしました。

 

ちなみに、以下のコードは、

上記1番目のサイトで紹介されているものです。

 

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

2.HTMLを記述する欄に以下のコードを追加する

デザインからカスタマイズに移動して、

フッタのHTMLを記述する欄に

以下のコードを追加してください。

 

コピペで大丈夫です。

 

こちらのコードは、上記2番目に紹介した

サイトのものです。

 

<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>

 

3.デザインCSS欄に以下のコードを追加する

デザインCSS欄に以下のコードを追加します。

こちらも上記2番目のサイトにあるコードです。

 

#page-top {
display:none;
position:fixed;
right:30px;
bottom:30px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:#333;
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:#009416;
}
@media only screen and (min-width: 1400px){
#page-top{
right:50%;
margin-right: -650px;
}
}

 

これもコピペで大丈夫です。

 

以上の3つで、完成です。

 

ブログにTOPに戻るボタンが

表示されます。

 

ちなみに、PC版は、

このボタンが表示されますが、

スマホ版は、表示されません。

 

スマホ版の場合、一番下に

TOPに戻るためのボタンがあります。 

 

ただ、このままだと、

TOPに戻るボタンをクリックすると、

クリックした時に、ボタンの色が

黒色から緑色に変わります。

 

僕は、色を変えたくなかったので、

他のサイトを調べました。

 

そしたら、色をここで、

指定するというのを

説明しているサイトがあったので、

そこの部分を参考に、

このブログに設置している

TOPに戻るボタンをクリックしても、

緑色にならないようにしました。

 

www.cocoblog.work

 

自分で、ボタンをデザインするサイトも

ありましたが、やり方がややこしかったので、

こちらのサイトを参考にしました。

 

色が変わるのが気になる方は、

以下の4.を参考にしてください。

 

4. TOPに戻るボタンの色が緑色に変わらない方法

ボタンの色が緑色に変わらない方法は、

以下の通りです。

 

先程、3.で追加したコードの以下の箇所を

デザインCSSのHTMLを書いてある欄から、

削除します。

 

#move-page-top:hover{
color:#009416;
}

 

3.のコードの中の他の所で、

ボタンの色を黒色に指定してあったので、

多分、これが色が変わる所だと思い、

デザインCSSから、切り取りして、

確認した所、色が変わらなかったので、

切り取った状態で、保存しました。

 

実際に、僕のブログのTOPに戻るボタンを

クリックしていただければ、

わかると思いますが、

クリックしても、TOPに戻るだけで、

色は、黒色のままです。

 

僕は、デザインも気に入っていて、

黒色のままがよかったので、

これで、行きたいと思います。

 

まとめ

これで、TOPに戻るボタンを

表示させることができました。

 

これで、いちいち、マウスで、

スクロールしなくても、

ボタンをクリックするだけで、

上まで、戻ります。

 

実際、やってみて、とても快適です。

 

やみつきになります。

 

まだまだ、改良の余地は、

あると思いますが、

当面は、これで、

行きたいと思います。

 

TOPに戻るボタンを表示させたい方は、

参考にしてみてください。

 

以上、【はてなブログ

ブログにTOPに戻るボタンを

表示するようにしましたでした。

 

最後まで、読んでくださいまして、

ありがとうございました。