ネコ部長のお役立ちブログ

         明日から活かせる知識・話題など何かのお役に立つブログです

【はてなブログ】初心者でも簡単!上に戻るボタンを簡単に設置する方法

f:id:nekobuchou:20190325141107j:plain

こんにちはネコ部長です。

記事を読んでいて文字数が多いときに、トップページへ戻るボタンがあれば

とても便利です。しかし、残念ながらはてなブログにはそのような機能が

ありません。

 

そこでいろいろと調べてみたら、はてなブログでも設置できる方法が

ありましたので、さっそく設置してみました!

 

初心者の私でも簡単に設置することができましたので、導入を検討されて

いるかたにはおすすめです。

 

そこで今回は、簡単にトップページに戻るボタンを設置する方法を

紹介します。

 

設置の方法

トップページに戻るボタンについてはいくつか公開されていましたが、

無知な初心者の私でもわかりやすく、とても参考になったブログ記事

がこちらでした。

hatebumaru.hatenablog.com

それではさっそく設置してみましょう。

手順1

     f:id:nekobuchou:20190325150306p:plain

ダッシュボードの「設定」をクリックして、「詳細設定」→「headに要素を追加」

に下記のコードをコピペしてください。

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

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

手順2

     f:id:nekobuchou:20190325152259p:plain

 次は、ダッシュボードの「デザイン」をクリックし、

カスタマイズ(スパナマーク)→「フッタ」に下記のコード

をコピペしてください。

<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

     f:id:nekobuchou:20190325152259p:plain

次は、「デザインCSS」をクリックして、下記のコードをコピペして

完了です。

/*上に戻る*/

#page-top {

  display:none;

  position:fixed;

  right:10px;

  bottom:20px;

  margin0;

  padding0;

  text-align:center;

}

#move-page-top{

  color:rgba(0,0,0,0.4);

  text-decoration:none;

  display:block;

  cursor:pointer;

}

#move-page-top:hover{

  color:rgba(0,0,0,0.6);

}

@media only screen and (min-width: 400px){

  #page-top{

    right:50%;

    margin-right-450px;

  }

}

 まとめ

どうでしょうか?簡単にできますよね。

ただし、ブログデザインテーマによってはボタンの位置が変なところに

出るようですが、私が使っている「Brooklyn」は特に問題はありません

でした。Brooklyn - テーマ ストア

 

このやりかた以外でも、ボタンのデザインをアイコンなどに変える方法も

あるようですのでまた勉強しておきます。

 

このように初心者の私でも簡単にカスタマイズできるので、同じ初心者の

かたに少しでもお役に立てればと思って紹介しました。

またなにか役立つ情報があればお伝えしていきます。

 

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

 

 

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

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