BFL〜Blog For Leveling〜

ブログを書くことでHTML、CSS、Javascriptのレベリングに繋げようと企む管理人:mmmanのブログ。他のプログラミング言語も絶賛勉強中。

はてなブログに「先頭へ戻る」ボタンの実装カスタマイズ

はてなブログを始めてまだまだペェペェなこのブログ。 楽しみながら絶賛カスタマイズ中です。

新しく「先頭へ戻る」ボタンの実装をしましたので、今日はカスタマイズの概要を備忘録がてら説明します。

目次

「先頭へ戻る」ボタンとは?

よくあるのはウィンドウ右下にあって、クリック(タップ)するとウィンドウ先頭へスルスルスクロールしていくやつですね。 ユーザビリティーの向上につながります。

実装にあたる簡単な構想概要(共通)

ザックリいくと、ある一定量スクロールすると、右下に「フワッ」とボタンが表れてクリックすると「スルスル」と先頭へ スクロールしていってボタンも「フワッ」と消える、というような感じにしていきます。

はてなブログでのコーディング

ブログサービス毎にカスタマイズ方法が違うのですが、今回はあくまでも「はてなブログ」でのカスタマイズ方法に ついて書いていきます。ゆっても、考え方や側の部分は共通ですが。以下、今回のはてなブログでのコーディングの 簡単な概要です。

  • head要素内でJQueryを読み込む
  • HTMLでボタンを実装する
  • 動作部分のJavaScriptを実装する

では、ひとつひとつ説明していきます。

JQueryの読み込み(HTML/head)

JQueryを使用するので読み込み用のscriptタグを書いていきます。 はてなブログでこれを実装するのにドコに書けばいいのか、と。 調べていると、人によってマチマチなんですが、今回はhead要素内に書いていきたいと思います。

「設定>詳細設定>headに要素を追加」の項目に以下のコードを追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

(Ver.は現在の最新です)

ボタンの追加/デザイン(HTML/body、CSS)

次はhtmlでボタンを追加します。今回は画像は使用せず、background-colorとborder-radiusで ボタンのデザインを作成しますので、その部分をデザインCSSに追加します。

まずはhtmlから。

「デザイン>カスタマイズ>フッタ」に以下のコードを追加します。

<div id="back-to-top"><a href="#">to TOP</a></div>

(idとボタンの文言は好みで)

次はCSSでデザインをば。 大きく分類すると次の2点についてのコードを追加。

  • デザイン
  • スクロールに関係なく右下に固定

「デザイン>カスタマイズ>デザインCSS」に以下のコードを追加します。

#back-to-top{
    padding:5px 10px;
    font-size:20px;
    font-weight:bold;
    background-color:rgba(0,0,0,0.3);
    position:fixed;
    right:5px;
    bottom:5px;
    border-radius:5px;
}
#back-to-top a{
    color:#fff;
}
#back-to-top a:hover{
    text-decoration: none;
    color:#000;
}

(詳細な説明は割愛)

ボタンの動作部分(JavaScript)

次は動作部分のコーディング。 大きく分類すると次の3点についてのコード。

  • ページ読み込み直後はボタンを非表示
  • スクロール量に応じて「フワッ」と表示/非表示の切替
  • ボタンをクリックすると「スルスル」と上へスクロール

といことで、上の手順で追加したhtml部、
「デザイン>カスタマイズ>フッタ」の先ほどのコード下に以下のコードを追加。

<script>
$(function() {
    $('#back-to-top').hide();
    $(window).scroll(function() {
        if ($(this).scrollTop()>100) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });
    $('#back-to-top a').click(function() {
        $('body').animate({
            scrollTop:0
        }, 500);
        return false;
    });
});
</script>

今回のサンプルコード

今回追加したコードを追加場所別にまとめます。

設定>詳細設定>head

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

デザイン>カスタマイズ>フッタ

<div id="back-to-top"><a href="#">to TOP</a></div>
<script>
$(function() {
   $('#back-to-top').hide();
   $(window).scroll(function() {
       if ($(this).scrollTop()>100) {
           $('#back-to-top').fadeIn();
       } else {
           $('#back-to-top').fadeOut();
       }
   });
   $('#back-to-top a').click(function() {
       $('body').animate({
           scrollTop:0
       }, 500);
       return false;
   });
});
</script>

デザイン>カスタマイズ>デザインCSS

#back-to-top{
    padding:5px 10px;
    font-size:20px;
    font-weight:bold;
    background-color:rgba(0,0,0,0.3);
    position:fixed;
    right:5px;
    bottom:5px;
    border-radius:5px;
}
#back-to-top a{
    color:#fff;
}
#back-to-top a:hover{
    text-decoration: none;
    color:#000;
}
お持ちのブログのカスタマイズに参考になれば幸いです。 その際、デザインはお好みに変更していただければ、と。

[疑問。。。]スマホ版での表示

ここで完了のはずだったんですが、スマホ版で表示されていません。。。このブログだけでなく、 他に「先頭へ戻る」ボタンを実装されているブログでも同様です。以前は表示されていたようですが、 なぜか表示されていません。

調査してみて原因がわかったら、スマホに対応するように修正したいと思います。