読者です 読者をやめる 読者になる 読者になる

torinos 〔トリノス〕

雑談したり、手芸したり、ジャニーズ愛でたり。

超初心者のはてなブログカスタマイズ ~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というのが背景色の不透明度を設定するためのものだそうな!勉強になります! このコードを付け足すのはいちばん下で大丈夫でした!

 

今日のカスタマイズはイメージどおりできて満足満足~♪

あとは、

・記事欄の幅を少し広くしたい

・記事をほそーい線で囲みたい

・タイトル欄にちょっと飾りをつけたい

かな…

 

引き続き、先人の知恵を探しに行ってきまーす!

 

 

スポンサーリンク