【はてなブログ】一番上まで自動スクロールするボタンを設置する！クリックで実行！コピペOK

今回は、はてなブログで「トップに自動スクロールするボタン」を設置する方法について紹介します。

このボタンをクリックすることで、ページの一番上までスクロールさせることができます。

記事のボリュームが大きくてスクロールするのが大変な記事でも、簡単にトップへ移動することができるようになるのでチェックしてみてください。

はじめに

今回は、久しぶりに「はてなブログカスタマイズ」の記事です。

内容は「はてなブログでトップにスクロールするボタンを設置する方法」

実際に設置してみるとこんな感じになりました。

こちらのボタンをクリックすることで、記事を読み進めていても「一瞬で1番上まで自動スクロールさせる」ことができちゃいます。

縦長のページに設置しておくことで、ユーザーの利便性がアップするので参考にしてみてください。

jQueryを記述する

今回の処理では「jQuery」を使用しました。

はてなブログでjQueryを使用する場合、以下のような記述を追加する必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

すでにこのようなコードが記述されている場合は飛ばしてOK。

逆に、初めてjQueryを使うという方は「はてなブログ > 設定 > 詳細設定 > headに要素を追加」か「記事下」の中にコピペしておいてください。

HTMLでトップへ戻るボタンを設置する

続いて、実際にボタンとして表示する要素を設置していきましょう。

今回はこんな感じのボタンをイメージしています。

「はてなブログ > デザイン > 記事下」に以下のような記述を追加してください。

<div class="scroll-button"></div>

HTMLの処理はこれだけ。

ボタンとしては、階層やクリック時の動作を指定する必要はなく、要素だけがあればOKといった感じですね。

この後、ボタンの見た目を調整したり、クリックしたときの動作を追加していくので、今はまだ何も表示されていないですが安心して大丈夫です。

CSSでトップへ戻るボタンの見た目を調整する

次は、先ほど設置したボタンの見た目を調整していきます。

今回作成したボタンは「グレーに白のやじるし」というデザインにしてみました。

以下のコードを「はてなブログ > デザイン > デザインCSS」に追加しましょう。

.scroll-button {
  z-index: 1;
  background-color: #5f5f5f;
  border-radius: 27px;
  border: 2px solid #efefef;
  box-shadow: #848484 0px 0px 3px 1px;
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  text-align: center;
  opacity: 0;
  transition: opacity .3s linear;
}
.scroll-button:before {
  content: "";
  width: 14px;
  height: 23px;
  position: absolute;
  top: 18px;
  left: 18px;
  background-color: white;
}
  .scroll-button:after {
  content: "";
  border-width: 16px;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: #ff000000;
  border-bottom-color: white;
  border-top-color: #ff000000;
  position: absolute;
  top: -9px;
  left: 9px;
}

CSSは「トップへ戻るボタン」の動作に直接的な影響はないので、好みで自由に調整してOKです。

「before」や「after」に記述した部分で「白い矢印」をデザインしているのですが、これらをカスタマイズすることで「三角形」や「上かっこ」みたいなボタンも作れそうですね。

ちなみに、私は「スマホ用のCSS」を別で用意しているので、ボタンの配置を少し調整しています。

.scroll-button {
  z-index: 1;
  background-color: #5f5f5f;
  border-radius: 27px;
  border: 2px solid #efefef;
  box-shadow: #848484 0px 0px 3px 1px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  opacity: 0;
  transition: opacity .3s linear;
}
.scroll-button:before {
  content: "";
  width: 14px;
  height: 23px;
  position: absolute;
  top: 18px;
  left: 18px;
  background-color: white;
}
.scroll-button:after {
  content: "";
  border-width: 16px;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: #ff000000;
  border-bottom-color: white;
  border-top-color: #ff000000;
  position: absolute;
  top: -9px;
  left: 9px;
}

また、レスポンシブデザインで運営している場合は、サイトに合わせてCSSの調整が必要になるかもしれないので注意してください。

jQueryでクリックした時に自動スクロールさせる

最後に、トップへ戻るボタンをクリックした時の動作を記述していきましょう。

jQueryの流れはこんな感じ

流れ自体はシンプルですね。

以下のコードを「記事下」に追加します。

<script>
$(function(){
  var $scroll_button = $(".scroll-button");
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > $(window).height()){
      $scroll_button.css("opacity", ".7");
    }else{
      $scroll_button.css("opacity", "0");
    }
  });
  $scroll_button.click(function(){
    $("html,body").animate({scrollTop: 0}, 500, "swing");
  });
});
</script>

このコードを追加することで、記事を開いてすぐなら「トップへ戻るボタンを非表示（Opacity: 0）」

スクロールしたら「トップへ戻るボタンを表示（Opacity: .7）」

表示された「トップへ戻るボタン」をクリックしたら、scrollTopの値を「0」にして一番上に戻るようになっています。

また、この時「animate」を使うことで「少しずつスクロール」というような処理を追加してみました。

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

一番上まで「パッ」と移動したい場合は「animate」ではなく、「scrollTop(0)」というように記述するとうまくいくと思います。

$("html,body").scrollTop(0);

まとめ

今回紹介した方法を使うことで、はてなブログに「トップへ戻るボタン」を追加することができました。

クリックすればページの一番上まで自動的にスクロールでき、記事内の移動がよりスムーズになるので、興味のある方はチェックしてみてください。

【はてなブログ】YouTubeの埋め込み動画を後から読み込ませる方法！クリックしたらiframeを実行する！

2018.6.29

今回は、iframeを使ってはてなブログに埋め込んだ「YouTube」の動画を、任意のタイミングで読み込ませる方法について紹介します。 画像をクリックしたらYouTube動画を読み込むようにできるので、記事の表示スピードが遅くなる心配もなく、動画を設置できます。 設置した動画の数が多いときに便利な...

ではまた。