Bloggerで自分のブログに「TOPへ戻る」ボタンを設置する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
突然ですが、あなたは自分のブログに「TOPへ戻る」ボタンをつけていますか?

「そんなの必要ない」と思う方もいるかもしれませんね。
確かにパソコンでは右のスクロールバーを動かすか「HOME」キーを押せば済む話です。
スマホでは上端をタップすれば1番上までスクロールしてくれます。
しかし、読者の利便性を考えると「TOPへ戻る」ボタンがあった方が良いです。

というわけで、今回は自分のブログに「TOPへ戻る」ボタンを設置する方法についてお話します。

スポンサーリンク

設置するボタンはどんな?

設定した位置まで下へスクロールすると、下からスッと「TOPへ戻る」ボタンが出るようにします。
また、マウスカーソルをそのボタンに合わせると色が変わります。
こんな感じ!

 

スポンサーリンク

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

1. Blogger管理画面「テーマ」を選択 → 「HTMLの編集」を選択

2.「<head>」の下に次のコードを貼り付け

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'  type='text/javascript' />

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

”100”の数値を変えるとボタンが出る位置が変わります。

3. 「</html>」の上あたりに次のコードを貼り付け

<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

4. 「]]></b:skin>」の上あたりに次のコードを貼り付け

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}

#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#page-top a:hover {
    text-decoration: none;
    background: #999;
}

おしまい!お疲れさまでした。

スポンサーリンク

スマホでは「TOPへ戻る」ボタンを非表示

ある日、自分のブログをiPhoneで見たとき、あることに気付きました。
アドセンス広告にボタンがかぶっとる!!
これではミスタップの恐れがある為、グーグルさんに怒られてしまいます。
というか、ポリシー違反です。
警告が来る前にスマホでは非表示にします。
1. 「@media screen and~」の下に次のコードを貼り付け

#page-top{
display: none;
}

おしまい!たったこれだけです。

スポンサーリンク

さいごに

いかがでしたでしょうか?
今回、当ブログで使用している「TOPへ戻る」ボタンの設置方法をご紹介しました。
数値やカラーコードによって、ボタンの表示位置や色を変えることができます。
自分好みにあれこれ変えてみると楽しいですよ!ぜひお試しください!

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント