<ZELOカスタマイズ記⑧>トップ(記事の最初)に戻るボタンを設置したはなし

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

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


Cocoon時代の「トップに戻るボタン」

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


今日はHTMLの編集から入りません!
使うのはどうやら、「ガジェット」のようです。


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


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

ガジェットをひらく

レイアウト
 → 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に「トップに戻る」ボタンを設置(デフォルト)

ついてる!!!!(右下)

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


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>

こんなカンジになりました↓
ZELOに「トップに戻る」ボタンを設置(色変更後)

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

0 件のコメント :

コメントを投稿

関連記事