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

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

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

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

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;
}
/* 追加挿入　上へ戻るボタン　ここまで
==================================================
*/

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

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

画像を使用する場合、画像はあらかじめ、ライブドア管理画面>画像管理から、使用する画像をアップロードしておく必要がある。