はてなブログのデザイン「Minimalism」で、ページの先頭に戻るボタンを設置する方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

最近、ブログのデザインを集中的にカスタマイズしています。

で、今回は、「ページの先頭にすーっと戻るボタン」の設置について、ググって実践してみました。

f:id:kayoko_cafe:20200506151138j:plain

ページの先頭に戻るボタンについて

色んな方のブログ記事を読んでいると、右下に現れるボタン。

記事をだいぶ読んだ時なんかに、このボタンをタップすると、すーっとそのページの先頭まで戻るの、便利ですよね。(^ ^)

で、私もこれやりたい！と思いまして。

別の目的で参考にさせて頂いた、こちらの記事からたどって、↓

はてなブログ”minimalism”の初期設定とカスタマイズ【ほぼコピペで完結】 | かろちょあ.com

簡単に設定できる、こちらの記事を参考にさせていただき、実践しました。↓

ページトップへ戻るスムーズスクロール（jQueryなし） - IMUZA.com

ページのトップに戻るボタンの設置方法

上記の参考記事にある、「はてなブログ用」という項目の指示にそって、まず以下のフッタ用のコードをコピーします。

<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="あなたのブログURL"><i class="blogicon-home"></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>

ブログ編集画面→デザイン→工具マーク→「フッタ」の1番下に貼り付けます。

で、上のコードは、ページの先頭に行くボタンだけでなく、「ホームに戻るボタン」も表示されます。

なので、「ホームボタンは要らないよ」という場合は、コードの4行目（<li> から</li>まで）を消します。

逆に、ホームに戻るボタンも表示させたいなら、4行目の「あなたのブログURL」という部分を消して、ご自身のブログのURLを入力します。

そして、「変更を保存する」をクリック。

次に、上記の参考記事の、「はてなブログ用」という項目のすぐ上に表示されている、以下のCSSコードをコピーします。

/* To Top */
.toTop-nav {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: -webkit-flex;
  display: flex;
  padding: 0;
  margin: 0;
  z-index: 999; }
  .toTop-nav li {
    list-style-type: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    text-align: center; }
    .toTop-nav li:first-child {
      margin-right: 10px; }
    .toTop-nav li a {
      display: block;
      width: 50px;
      height: 50px;
      font-size: 30px;
      line-height: 50px; }
      .toTop-nav li a {
        color: #fff;
        text-decoration: none; }
        .toTop-nav li a:visited {
          color: #fff; }
        .toTop-nav li a:hover {
          color: #fff;
          text-decoration: underline; }
        .toTop-nav li a:active, .toTop-nav li a:focus {
          color: #fff; }
      .toTop-nav li a:hover {
        text-decoration: none; }