あると無いでは大違い、とても便利です。
当ブログでも右下にあります。
PageTopをクリックしたら、ページの上に
連れて行ってくれます。
トップへ戻るボタンを追加
ソース元が不明なコードです。
しかし、多くのBloggerサイトで利用されているこのコード。
当ブログでは少しアレンジしています。
肝心のデフォルトのコードがわからないので、
正解は不明です。
あくまでも自己責任ですが、
当ブログでは上手く機能していますよ。
まずはテンプレート編集へ。
</body> の直前に、以下のコードを追加しましょう。
<b:if cond='data:blog.isMobile'>
<b:else/>
<div class='PageTop'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($) {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
jQuery(function($) {
$("#PageTop").scrollToTop();
});
</script>
<a href='#' id='PageTop' style='display:none;' title='トップへ戻る'>Page Top</a>
</div>
</b:if>
です。
<b:if cond='data:blog.isMobile'>
<b:else/>
ここにトップへ戻るコンテンツ
</b:if>
としてあります。
これで、
モバイルでは非表示にして、
それ以外（PC）では、
トップへ戻るボタンを表示する。
という指示を出しています。
また、
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
はjQueryコード。
既に導入されている方はここを削除してもOK。
そしてCSSを。
#PageTop {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width:90px;background-color: #EEEEEE;
background-color: rgba(238, 238, 238, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');
text-align:center;
padding:5px;
position:fixed;
bottom:20px;
right:10px;
cursor:pointer;
color:#444;
text-decoration:none;
border:1px solid #C9C9C9;
z-index: 10;
}
このように追加しています。
CSS記入欄に追加してください。
表示位置は良いように変えて下さいね。
最後の
z-index: 10;
は、当ブログでは指定していますが、
不要であれば削除してください。
要は他のコンテンツより上に表示させてねという指示です。
案外簡単に出来ましたね。
ユーザーがとても使いやすくなるので、
是非導入してみましょう。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録