遠回りのサイトになってない？「TOPへ戻る」ボタンを設置して回遊率を高めよう

f:id:boukenshaLv1:20180721141643j:plain

こんにちは！最近、記事の文字数が5000字を軽く超えてしまう冒険者Lv.1（@boukenshaLv1)です！！

よく自分のブログをチェックするんですが、こんな悩みがあります。

ページトップに戻るのにスクロールめんどくさい

ブログトップに行きたいけど記事の下にそのボタンが無い

こういう状態のサイト（ブログ）ってたくさんありますよね。

そして、長文の記事だとすっごいめんどくさい！
「適切な場所に適切な行動ボタンが欲しーーー！」と、読者目線で思います。

多くの読者は知らない人が書いているブログを見ているのだから、たとえ良記事があったとしても知らないのでブログから離脱してしまうんですよ。

ブログ内の導線がしっかりしていると次々と読みたい記事を回りユーザビリティが上がっていきます。

記事概要

この記事では、読者がサイト内を歩くときに遠回りをしないように「TOPへ戻る」ボタンを設置して労力を軽減してあげよう！というカスタマイズ方法を紹介しています。

TOPへ戻るボタンの実装イメージ
参考にした記事
「TOPへ戻る」ボタンカスタマイズ方法
「TOPへ戻る」ボタン　まとめ

TOPへ戻るボタンの実装イメージ

【サイトトップページでの表示】

【記事ページでの表示】

参考にした記事

azanaerunawano5to4.hatenablog.com

とても分かりやすい解説で、すぐに実装完了しました。

「TOPへ戻る」ボタンにはいろんなデザインカスタマイズがありますが、
この方のデザインは
・ちょうどいい大きさ
・半透明なので目立たなく画面に表示されても邪魔にならない
・どんなデザインのサイトでも違和感なく馴染むシンプルなデザイン

という点がとても気に入っています。

「TOPへ戻る」ボタンカスタマイズ方法

今回コードを記述する場所は
・「headに要素を追加」
・「フッター」
・「デザインCSS」

の３か所になります。

いずれもコピペだけで出来るので初心者の方も簡単に実装できます。

head内にコードを記述する

このコードは＜head＞～＜/head＞内に記述するのですが、はてなブログの場合この位置は
「設定」→「詳細設定」→「headに要素を追加」になるので

「headに要素を追加」の項目に、以下のコードをコピペして記述してください。

<!-- ↓TOPへ戻るボタンの画像読み込みコード↓ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- ↑TOPへ戻るボタンの画像読み込みコード↑ -->

このコードは「TOPへ戻る」ボタンのアイコンを呼び出すためのコードです。

カスタマイズ初心者は[デザイン]でのカスタマイズ以外でのコード記述をするカスタマイズ方法は見慣れないかもしれませんね。

フッターにコードを記述

次に「デザイン」→「カスタマイズ」→「フッター」の場所に以下のコードをコピペで記述します。

<!-- ↓ページTOPに戻るボタン↓ -->
<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>
<!-- ↑ページTOPに戻るボタン↑ -->

このコードを変えることで
・「アイコンデザイン」
・「戻るスピード」
・「どれくらいページが進んだら表示されるか」
・「どの位置まで戻るのか」

などを設定変更できます。

私は初期（上のコード）のままで満足しているので、変更していません。

デザインCSSに記述する

最後に「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードをコピペして記述します。

/* ↓ページトップへ戻るボタン↓ */
/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  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;
  }
}
/* ↑ページトップへ戻るボタン↑ */