超初心者のはてなブログカスタマイズ ～TOPへ戻るボタンをつけてみる～
記事を書いたら自分でも読み返してみたりするのですが、最近の記事が長すぎていちばん上まで戻るのにマウスホイール何回くるくるせにゃならんのだ！とストレスになってきたので今日は「TOPに戻る」ボタンをつけてみました！
サッ！と戻るよりはしゅるる～～んと戻る感じにしたかったので、イメージどおり！
-----------------------------------------------------------------------------------------------------------
★今回参考にさせていただいたサイト様
はてなブログにページトップへ戻るボタンをつけよう！ - No Hack No Life
はてなブログに「先頭へ戻る」ボタンの実装カスタマイズ - BFL〜Blog For Leveling〜
ありがとうございました！
-----------------------------------------------------------------------------------------------------------
★「カスタマイズ」→「フッタ」→「HTML」のテキストボックスへ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$('#pagetop').fadeIn();
} else {
$('#pagetop').fadeOut();
}
});
$('#pagetop').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script><a id="pagetop" href="#top" class="page_top" style="display: none;">▲ TOPへ戻る</a>
色々いじってみたのですが、400というのが「どれくらい下にスクロールしたらTOPに戻るボタンを登場させるか」の値で、300というのが「いちばん上にどれくらいのスピードで戻るか」の値でした。▲ TOPへ戻るのところはボタンに表示させたい文言を入れればOK。
★「カスタマイズ」→「デザインCSS」のテキストボックスへ
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#fff;
font-size:15px;
text-decoration:none;
background:#000;
border-radius:5px;
background-color:rgba(0,0,0,0.3);
}
#pagetop:hover {
background:#ffdd00;
}
border-radiusというのがボタンを角丸にするもので、background-color:rgbaというのが背景色の不透明度を設定するためのものだそうな！勉強になります！ このコードを付け足すのはいちばん下で大丈夫でした！
今日のカスタマイズはイメージどおりできて満足満足～♪
あとは、
・記事欄の幅を少し広くしたい
・記事をほそーい線で囲みたい
・タイトル欄にちょっと飾りをつけたい
かな…
引き続き、先人の知恵を探しに行ってきまーす！
スポンサーリンク
