ココまとめ

ゲーム、映画、ドラマを中心に記事にしていきます

ココまとめ

ーおすすめ記事ー

【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)

 みなさまお気づきになったでしょうか?
つい先日、私のはてなブログに「トップへ戻るボタン」設置いたしました。

というのも、自分のブログを見返していると、
一番上まで戻りたいときにすぐ戻れない!
ということに気付きました。

他のサイトを見てみると
「トップへ戻るボタン」が設置されているのに気づきまして、
私も真似しよう!ということで設置してみました。

というということで本日は、
はてなブログでの「トップへ戻るボタンの」設置方法
ご紹介したいと思います。

トップへ戻るボタンとは?

そもそも、トップへ戻るボタンとは何ぞや?
というところから説明いたします。

f:id:coco090:20190721152336j:plain

トップへ戻るボタンとは、
その名の通り「読んでいる記事の最上部(トップ)へ戻るボタン」のことです。

最近のホームページでは、トップへ戻るボタンが一般的に存在しておりますが、
はてなブログの初期設定では存在しないため、自分で導入する必要があります。

 トップへ戻るボタンの設置方法

基本的には下記のコードをコピー&ペーストで設定できます。

HTML

f:id:coco090:20190721160710j:plain

デザイン>カスタマイズ>フッターへ以下のソースを貼りつけます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
<script>
  $(window).scroll(function(){
  var now = $(window).scrollTop();
   if(now > 500){
   $("#page_top").fadeIn("slow");
  }else{
   $("#page_top").fadeOut("slow");
  }
 });
 $("#page_top").click(function(){
  $("html,body").animate({scrollTop:0},"slow");
 });
</script>

HTML解説

   if(now > 500){

このコードで「どれだけスクロールしたら表示するか?」
の数字を設定らしいです。
数字を少なくすれば早く表示され、大きくすれば遅く表示されます。

$("html,body").animate({scrollTop:0},"slow");

「scrollTop:0」は
「ボタンを押した後、上から何ピクセル目に戻るように設定するか」
を意味しており、数値を変更することで好みの位置に戻せます。

また、jQueryを使用しており、
ボタンを押すと、流れるようにトップへ戻るように設定しています。
これを使用しないと、いきなりトップページへ瞬間移動します。

CSS

f:id:coco090:20190721160726j:plain

デザイン>カスタマイズ>デザインCSSへ以下のソースを貼りつけます。

/*上に戻るボタン*/
#page_top{
   width: 90px;
   height: 90px;
   position: fixed;
   right: 0;
   bottom: 0;
   opacity: 0.6;
}
#page_top a{
   position: relative;
   display: block;
   width: 90px;
   height: 90px;
   text-decoration: none;
}
#page_top a::before{
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   content: '\f102';
   font-size: 25px;
   color: #3f98ef;
   position: absolute;
   width: 25px;
   height: 25px;
   top: -40px;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   text-align: center;
}
#page_top a::after{
   content: 'PAGE TOP';
   font-size: 13px;
   color: #fff;
   position: absolute;
   top: 45px;
   bottom: 0;
   right: 0;
   left: 0;
   margin: auto;
   text-align: center;
   color: #3f98ef;
}

 以上となります。

CSS解説

   content: 'PAGE TOP';

これで「PAGE TOP」というロゴを入れております。
入力する文字を変更すれば、変わります。

   content: '\f102';

この数字でアイコンの種類を設定しております。
他にも種類がありますので載せておきます。

f:id:coco090:20190721155301j:plain

   content: '\f062';

 

f:id:coco090:20190721155353j:plain

   content: '\f139';

 

f:id:coco090:20190721155525j:plain

   content: '\f0d8';

色については、下記のカラーコードをいじって調整してください。

   color: #3f98ef;

最後に

私はそんなにHTMLやCSSに詳しくありませんので、
下記サイト様を参考に、コードを加えさせて頂きました。ありがとうございます。

本当は左下では無く、右下に表示させたかったのですが・・・。
私にはワカリマセンデシタ。

cotodama.co