【この記事を読むのに必要な時間は約 9 分です。】
ライブドアブログは無料版で利用している。テンプレートを変更すると、それまで使用していたテンプレートのカスタマイズが適用されないので、面倒だった><
本日、ライブドアブログでテンプレートを変更したので、カスタマイズを再設定したついでに、カスタマイズしているところを紹介していきたいと思う。
まずは、定番の上へ戻るボタンの設置について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;
}
/* 追加挿入 上へ戻るボタン ここまで
==================================================
*/
これで一定量スクロールするとこんな感じで表示されるようになる。
2.Jqueryプラグインと画像、CSSで作る上へ戻るボタン
画像を使用する場合、画像はあらかじめ、ライブドア管理画面>画像管理から、使用する画像をアップロードしておく必要がある。
ヘッダー部分への記載
<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 */
これで一定量スクロールするとこんな感じで表示されるようになる。
念のため利用した画像も貼り付けておく。
画像を用いたものと画像を用いないものの2種類紹介した。簡単で、訪問者には便利なので是非設置して欲しい。
以上