いわゆる、「上に戻る」ボタンですね。
で、ちょいと調べてみたら、Bloggerでトップに戻るボタンの設置に使われているTipsは、外部CSSを読み込んでボタンを設置するものばっかり（日本語のみ）。
これ、参照先のCSSに依存していて、私個人的にはちょっとすっきりしないやり方だったりします。
そこで、自分のブログ内にこのボタンの画像を置き、それを、画面がちょっと下にスクロールしたときに右下に表示させるというやり方を取りました。
そんなやり方のご紹介。
- まず最初に、Bloggerのマイブログから「テンプレート」を選択し、「HTMLの編集」に入ります。
- 次に、エディタ内をクリック→Ctrr+F→<head>タグを検索します。
- 下のコードを<head>タグの下に貼り付けます。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- そうしたら一旦、「テンプレートを保存」します。
- 続いて、Ctrl+Fで</body>タグを探し、その上に以下のコードを貼り付けます。
<!-- Scroll Back To Top -->
<style>
.ks-back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class='ks-back-to-top' src='https://*****'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.ks-back-to-top').fadeIn(duration);
} else {
jQuery('.ks-back-to-top').fadeOut(duration);
}
});
jQuery('.ks-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
- https://*****のところには、ボタンに使用したい画像のURLを指定します。
- 一旦「テンプレートを保存」し、そのウインドウは閉じずにそのままにしておきます。
- 下にあるボタンから、好きなものをダウンロードします。Chromeの場合、右クリックして「名前を付けて画像を保存」でボタンをダウンロードできます。
- 続いて、別ウインドウからBloggerの「新しい投稿」で記事のエディタ画面に入り、先ほど保存したボタンの画像をアップロードします。その後、エディタ左上の「HTML」でHTML編集画面にして、そのボタンのURLをコピーしておきます。
- テンプレを編集しているウインドウに戻り、コピーしたURLをhttps://*****にペーストします。
- 「テンプレートを保存」で完了。
- ボタン画像のアップに使った投稿は削除してかまいません。ボタン画像はそれで消えるわけではありませんのでご安心を。
コード表記で青文字にしてある数字は、それぞれ矢印に関する設定値になります。
var offset = 220;・・・矢印の位置（下からのオフセット）
var duration = 500;・・・矢印の出現タイミング（スクロール量）
お好みでカスタマイズしちゃってください。
ちなみにこのブログのは、デフォルトのままです。
なお、お使いのテンプレートや他のjQuery, Javascriptなんかの使用環境によっては作動しない場合もあるかもしれません。
また、お約束ですが、使われる方は自己責任でお願いします。
んでは！
0 件のコメント :
コメントを投稿