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に戻るボタンを表示するようにしました。でした。

 

最後まで、読んでくださって、ありがとうございました。

お問い合わせ

ブログへの質問、ご意見は、こちらからどうぞ。
お気軽に、お問い合わせください。

*は必須項目です

名前

メールアドレス

性別

男性女性

*お問い合わせ内容

Powered by FormMailer.

SSL標準装備の無料メールフォーム作成・管理ツール|フォームメーラー