ライブドアブログのカスタマイズ-上へ戻るボタンの設置

【この記事を読むのに必要な時間は約 10 分です。】

ライブドアブログは無料版で利用している。テンプレートを変更すると、それまで使用していたテンプレートのカスタマイズが適用されないので、面倒だった><
本日、ライブドアブログでテンプレートを変更したので、カスタマイズを再設定したついでに、カスタマイズしているところを紹介していきたいと思う。
まずは、定番の上へ戻るボタンの設置について2種類ほど説明したい。どちらも一定量スクロールすると表示されるパターン。

1.JqueryプラグインとCSSで作る上へ戻るボタン

定番中の定番。こちらのjQueryでページの「トップに戻る」ボタンを実装。スクロールに応じてフェードイン・アウト[WordPress]という記事を参考にさせて頂いた。もちろんWordPressでなくても全く問題なく動作する。

ヘッダー部分への記載

<head>と</head>の間にJquery本体に関する記述と、上へ戻るボタンを動かすJqueryプラグインの記述を行う。

Jquery本体

Jquery本体については、Google AJX APIのホスティングを利用する。
<head>と</head>の間に以下のように記述する。

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->

Jqueryプラグインでの処理

Jqueryプラグインについては、直接、<head>と</head>の間に記述する。なお、上記で設置したJquery本体よりも下に記述すること。

<!-- Jquery 上へ戻るボタンの設置http://mori2nd.com/jquery-back-to-top.html Start -->
<script type="text/javascript">
$(function() {
    var topBtn = $('.backtotop');    
    //最初はボタンを隠す
    topBtn.hide();
    //スクロールが400に達したらボタンを表示させる
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>
<!-- Jquery 上へ戻るボタンの設置http://mori2nd.com/jquery-back-to-top.html End -->

ボディ部分への記載

上へ戻るボタンの設置

上へ戻るボタンの設置について</body>の直前に以下のように記述する。

<!-- Jquery 上へ戻るボタンの設置http://mori2nd.com/jquery-back-to-top.html Start -->
<div class="backtotop" align="center">
<a href="#header">トップに<br>戻る</a> //文字は適宜変更して欲しい。
</div>
<!-- Jquery 上へ戻るボタンの設置http://mori2nd.com/jquery-back-to-top.html End -->
</body>←直前に記述するのが良い。

CSSへの記載

上へ戻るボタンの装飾はCSSで行う。配色などは、適宜変更して欲しい。

/* 追加挿入 上へ戻るボタン ここから
==================================================
*/
/* page-top */
.backtotop {
    position: fixed;
    right: 15px;
    bottom: 20px;
    z-index: 9000;
    display: none;
}    

.backtotop a {
    display: block;
    color: #FFFFFF;
    padding: 14px 6px;
    margin: 0;
    background-color: #bc82bd;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

.backtotop a:hover {
    background: #f2e7f8;
    color: #777777;
}
/* 追加挿入 上へ戻るボタン ここまで
==================================================
*/

これで一定量スクロールするとこんな感じで表示されるようになる。

WS000001

2.Jqueryプラグインと画像、CSSで作る上へ戻るボタン

tips!さんのスムーススクロールjQuery「Animated Scroll to Top」という記事を参考にさせて頂いた。画像も拝借して設定した。
なお、画像はあらかじめ、ライブドア管理画面>画像管理から、使用する画像をアップロードしておく必要がある。

ヘッダー部分への記載

<head>と</head>の間にJquery本体に関する記述と、上へ戻るボタンを動かすJqueryプラグインの記述を行う。

Jquery本体

Jquery本体については、Google AJX APIのホスティングを利用する。
<head>と</head>の間に以下のように記述する。

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->

Jqueryプラグインでの処理

Jqueryプラグインについては、直接、<head>と</head>の間に記述する。なお、上記で設置したJquery本体よりも下に記述すること。

<!-- back to topの設置 -->
<script>
$(document).ready(function(){
    // hide #back-top first
    $("#back-top").hide();
     
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 400) { //400pxでボタン表示
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0        //どこまで戻るか
            }, 800);                //スクロールスピード小さいほど速い
            return false;
        });
    });
});
</script>
<!-- /back to topの設置 -->

ボディ部分への記載

上へ戻るボタンの設置

上へ戻るボタンの設置について</body>の直前に以下のように記述する。

<!-- back to topの設置 --> 
<p id="back-top">
    <a href="#top"><span></span>Go to Top</a>//文字はGo to Topにしたが適宜変更してほしい。
</p>  
<!-- /back to topの設置 --> 
</body>←直前に記述するのが良い。

CSSへの記載

上へ戻るボタンの装飾はCSSで行う。配色などは、適宜変更して欲しい。

/*ここから追加*/

/* back to top */
#back-top {
    position: fixed;
    bottom: 20px;
    margin-left: 93%;
}
#back-top a {
    width: 50px;
    display: block;
    text-align: center;
    font: 10px/100% Arial, Helvetica, sans-serif;
    text-transform: none;
    text-decoration: none;
    outline: none;
}
#back-top a:hover {
    color: #000;
}
/* arrow icon (span tag) */
#back-top span {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: 7px;
    background: #009999 url(http://で始まる画像のURL) no-repeat center center;
    /* rounded corners */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
#back-top a:hover span {
    background-color: #00ffff;
}
/* back to top end */

これで一定量スクロールするとこんな感じで表示されるようになる。

WS000002

念のため利用した画像も貼り付けておく。

p_arrow010_012

画像を用いたものと画像を用いないものの2種類紹介した。簡単で、訪問者には便利なので是非設置して欲しい。
以上

Related Posts Plugin for WordPress, Blogger...