• TOP
• ブログ

＜ZELOカスタマイズ記⑧＞トップ（記事の最初）に戻るボタンを設置したはなし

2019-12-17T00:00:00+09:00 2019-12-29T05:43:02Z Blogger ZELO カスタマイズ ブログ

今日のカスタマイズは、「トップに戻る」ボタンの設置です。

「トップに戻る」ボタンって、こんなやつね。右下の上向き矢印。

これを、ZELOにもつけちゃいます！！！！

今日はHTMLの編集から入りません！

使うのはどうやら、「ガジェット」のようです。

ZELOで「トップに戻る」ボタンを設置

（参考）Bloggerに自作のページトップボタンを設置

参考記事どおりにやっていきますよ♪

ガジェットをひらく

レイアウト

　→　footer credit　で「＋ガジェットを追加」

　→　HTML/JavaScript　をクリックして追加する

• タイトルにはなにも入力しない
• 以下のコードを貼り付けて

→　［保存］

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

<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}

@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>


更新してみると・・・

ついてる！！！！（右下）

でもこれじゃあ目立たないので、ちょぴっと目立つようにしてみまする。

ZELOで「トップに戻る」ボタンのデザインを変更

デフォルトでマウスホバーも指定されちゃってるし、場所もバッチリ、「TOP」の文字をFontAwesomeアイコンにしようかとも思ったけれど、これはこれで雰囲気があってかわいいからそのままにしました！

修正したのは、色だけ。

通常表示の背景色　：　アクセント

通常表示の文字色　：　サブ（薄）

マウスホバー時の背景色　：　サブ（濃）

マウスホバー時の背景色　：　サブ（薄）

に設定した後のコードがこちら↓

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

<style type="text/css">

/* PageTopボタン基本設定 */

#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}

#page-top a {display: inline-block; text-decoration: none;

background-color: #8BC34A; opacity: 0.7; color: #FFF8E1; font-weight: bold;

height: 60px; width: 60px; line-height: 60px;

border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}

#page-top a:hover {text-decoration: none; background-color: #FFA000; color: #FFF8E1;}

@media screen and (min-width: 0) and (max-device-width: 479px) {

#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;

font-size: 85%;}

}

@media screen and (min-width: 480px) and (max-device-width: 666px) {

#page-top {bottom: 10px; right: 15px;}

}

@media screen and (min-width: 667px) and (max-device-width: 1023px) {

#page-top {bottom: 10px; right: 15px;}

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

    var topBtn = $('#page-top'); 

    topBtn.hide();

    //スクロールが100に達したらボタン表示

    $(window).scroll(function () {

        if ($(this).scrollTop() > 100) {

            topBtn.fadeIn();

        } else {

            topBtn.fadeOut();

        }

    });

    //スクロールしてトップ

    topBtn.click(function () {

        $('body,html').animate({

            scrollTop: 0

        }, 500);

        return false;

    });

});

</script>

こんなカンジになりました↓

今回のカスタマイズはここまで！