ページのトップに戻るボタンを設置してみました☆


私のブログは記事が長くて、ものすごーく縦長になっていることが多いです(>_<)

ブログを読んで下さっている方には、ページのトップに戻るために

ご苦労をおかけしておりました(´・_・`)

なので、いろいろと探し回っていい方法を見つけましたので

今回ページトップに戻るボタンをつけてみることにしました。

記事をしばらく下にスクロールするとページの右下に以下のボタンが出てきます。

          blog1.jpg


このボタンをクリックしていただくと一瞬でトップに戻ります(^-^)

テンプレートの編集をするので念のため「複製(コピー)」をしておいて下さいね☆

FC2ブログ管理画面⇒「テンプレートの設定」⇒「HTMLの編集」で

スクリプトの設置をします。

</head>の直前に以下のものを挿入します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 700) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});
</script>

上の数字700は、下にスクロールさせて画像が表示されるまでの長さ。

下の数字500は、ページトップに戻る速さ。


さらに、「HTML編集」で

</body>の直前に以下のものを挿入して下さい。

<p id="back-top">
<a href="#top"><span>ここに文字を入れるとボタン画像に文字が入ります。</span></a>
</p>


これで「HTML編集」は終わりです。


次にCSSに追加をします。「スタイルシート編集」で一番下から一行改行して以下を挿入します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
margin-left: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 100px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(http://~画像のURLを挿入) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}


↑これは画像は回らない設定です。

画像をくるっと回したい場合は、さらに末尾に一行あけて以下を追加してください。

#back-top a:hover span {
-webkit-transform: rotate(720deg) scale(1.2);
-moz-transform: rotate(720deg) scale(1.2);
transform: rotate(720deg) scale(1.2);
opacity:0.5;
}


以下の数値はボタンを設置する位置です。

bottom: 5px; 下からの高さ
margin-left: 85%; ページ左からの位置 数値を少なくすると画像を左側に設置出来ます。


以下の数値は ボタン画像の大きさに合わせて変更して下さい。

width: 100px; 横幅
height: 50px; 縦幅


以下のコードは ボタン画像の背景の色です。お好きな色に変更して下さい。

background: #eae5e3


この設置方法は「Subox.net」というサイトさんで参考にさせて頂きました。

当ブログ用に変更した部分もありますのでこちらでも編集のやり方を載せましたが、

詳しくは「Subox.net」も見てみて下さい。


ユーザビリティを考えると、トップに戻るボタンは設置しておいた方がいいですね☆

当ブログでは、記事の最後にも付けていますが、

blog2.jpg

これはあまり使われていないと思いますので

常時見える位置にあるボタンはとっても便利だと思います☆

今日は日曜参観です。

朝からバタバタしまくりです(>_<)

お友達訪問はたぶん夜になってしまうと思います。すみません。

これからダッシュで学校へ行ってきマース

 タグ
None