ブログ回遊率を上げるには？「上へ戻る」ボタンの簡単な設置方法

相変わらず弱小ブログを細々書かせていただいてます。

二日に1回の更新が精いっぱいですね。

それでも気が付いたら100記事を超えてました。

どうも、八幡です。

皆様に比べたら、成長速度も遅く・・・

というか成長してないブログでありますが、自分のペースでゆっくり行きたいと思います。

とはいえ、あまりにも直帰率が高い。

アナリティクスから抜粋すると...

f:id:happousyumi:20190514160318j:plain

８５％台！！

ブログの直帰率平均は６５～９０％と言われているらしいので、八幡は直帰率の数字を挙げる方に大貢献しているわけです。

この間は９０％上回っていたしなぁ。

そもそも閲覧数が少ないので、やることはいろいろあるんでしょうが・・・

今回はこの直帰率を何とかするべく「上へ戻る」ボタンを設置してみることにしました。

ブログ初心者の方
回遊率を上げたい方
「上へ戻る」ボタンを設置していない方
１記事が長文の方

　などに読んでいただけると嬉しいです。

　ちなみに参考にさせていただいたのは次の記事です。

https://www.life-is-rpg.com/entry/top-button

　必要なことが必要な分だけでまとまっていて、とてもわかりやすかったです。

　冒険者LV１さんありがとうございました。

直帰率とは
読者目線でも「上へ戻る」ボタンはいいこと
「上へ戻る」ボタンの設置方法
まとめ

直帰率とは

　直帰率とは「サイトにたどり着いた読者の皆さんが、最初のページだけを閲覧しそのまま帰ってしまった率」の事です。

　グーグル先生のアナリティクス風にいうと、「すべてのセッション数のうち、セッション数が１ページだった数の割合」となります。

　例えるなら「入口だけ覗いて、帰ってしまわれたお客さんの割合」ってことですね。

　帰る理由としては、読者はその１ページで満足したのか、それとも他の記事を読むまでもないと判断されたのか。

　いずれにせよ、ブログを書く側としては、過去の記事も読んでいただけると嬉しいですよね。

読者目線でも「上へ戻る」ボタンはいいこと

　読者が帰ってしまう理由を挙げていくと

その１ページで満足した
読む必要がないクオリティ
開くまでに時間がかかる
サイトの作りが不親切
上に戻るまでスクロールするのが面倒

　などがあると思います。

　どんなに良記事をたくさん書いていても、大多数の初めての読者さんに分かるはずがないので、サイト内が不親切だと離脱してしまいます。

　関連ページを探してまで読まないといけないなら、さっさと次の分かりやすいサイトに移動してしまうんですね。

　また長文の記事では、上に戻る手間も読者にとっては同じこと。

　直帰率を下げるには「適正な位置に適正な機能ボタンを設置して、読者に親切なサイト」を目指すことも必要なんですね。

　上部にあるであろうグローバルメニューやカテゴリーに導いて、読者の労力を軽減してあげると、回遊率も上がってくると思います。

　「上へ戻るボタン」は読者目線でも大切なんです。

f:id:happousyumi:20190514171418j:plain

　ちなみに「上へ戻るボタン」はこんなのです。

　半透明で記事の邪魔にならないのが嬉しいですよね。

「上へ戻る」ボタンの設置方法

　「上へ戻る」ボタンの設置方法はたったの３工程。

　すべてコードをコピペすると済むので、初心者でも簡単です。

　八幡でもスグできました。

　コードを貼り付ける場所は次の通り。

「headに要素を追加」
「フッター」
「デザインCSS」

　簡単ですが万一に備えてバックアップはとっておいてください。

　それではやっていきましょう。

１、「headに要素を追加」

　はてなブログでは

「設定」→「詳細設定」→「headに要素を追加」と進みます。

f:id:happousyumi:20190514174133j:plain

　スクロールして「headに要素を追加」が出てきたらコードを貼り付けます。

f:id:happousyumi:20190514174908j:plain

　貼り付けるコードは次の通り。

　このままコピペしてください。

<!-- ↓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へ戻るボタンの画像読み込みコード↑ -->

　貼りつけたら「変更ボタン」をクリックして、反映させてください。

２、「フッター」

　次は「デザイン」→「カスタマイズ」→「フッター」

f:id:happousyumi:20190514175550j:plain

デザインをクリックするして、次画面でスパナマークの「カスタマイズ」を選ぶ。

f:id:happousyumi:20190514180317j:plain

　「フッター」に下記のコードを貼り付ける。

<!-- ↓ページ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」にコードをはる。

f:id:happousyumi:20190514181057j:plain

/* ↓ページトップへ戻るボタン↓ */
/*上に戻る*/
#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;
  }
}
/* ↑ページトップへ戻るボタン↑ */