butaブログ

butaブログ

ラーメン、話題の商品、関心事項等のお役立ち情報を発信しています❕

トップまたはボトムに一気に移るボタンの配置|はてなブログ(無料)

f:id:bunbuta:20210511103133j:plain

この度、運営しているブログを「ワードプレス」から「はてなブログ」に切り替えました。
そこで本記事では、はてなブログの無料バージョンで、どれだけのカスタマイズができるのか試してみたので、上手くいったものをお知らせします。

今回は、トップまたはボトムに一気に移るボタンの配置です‼️
作業の手順を、わかりやすくまとめましたので、ぜひチャレンジしてみて下さいね。

作業1.設定>詳細設定>headに以下要素を追記

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

作業2.デザイン>カスタマイズ>デザインCSSに以下を追記

/* ページトップへ戻るボタン */

#pagetop {

    position:fixed;

    bottom:10px;

    right:10px;

    padding:10px 20px;

    color:#f6bfbc;

    text-align:center;

}

 

/* ページトップへ戻るボタン:ホバー時 */

#move-page-top:hover{

  color:rgba(0,0,0,0);

}

 

/* ページボトムへ進むボタン */

#pagebtm {

    position:fixed;

    bottom:60px;

    right:10px;

    padding:10px 20px;

    color:#f6bfbc;

    text-align:center;

}

 

/* ページボトムへ進むボタン:ホバー時 */

#move-page-btm:hover{

  color:rgba(0,0,0,0);

}

 

位置を変更する場合は、「bottom(下)」と「right(右)」の数値を変更します。

 

作業3.デザイン>カスタマイズ>フッタに以下を追記

<!-- ページトップへ戻る -->

<script>

$(function () {

   /** ページトップ処理 **/

   // スクロールした場合

   $(window).scroll(function() {

       // スクロール位置が200を超えた場合

       if ($(this).scrollTop() > 200) {

           $('#pagetop').fadeIn("slow");

       } else {

           // ページトップへをフェードアウト

           $('#pagetop').fadeOut("slow");

       }

   });

 

   // クリックした場合

   $('#pagetop').click(function() {

       // ページトップへスクロール

       $('html, body').animate({

           scrollTop: 0

       },"slow");

       return false;

   });

})(jQuery);

</script>

 

<!-- トップアイコンの設定 -->

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>

 

<!-- ページボトムへ進む -->

<script>

$(function () {

   /** ページボトム処理 **/

   // スクロールした場合

   $(window).scroll(function() {

       // スクロール位置がボトム-1000を超えない場合

       if ($(this).scrollTop() < $(document).height()-1000) {

           $('#pagebtm').fadeIn("slow");

       } else {

           // ページボトムへをフェードアウト

           $('#pagebtm').fadeOut("slow");

       }

   });

 

   // クリックした場合

   $('#pagebtm').click(function() {

       // ページボトムへスクロール

       $('html, body').animate({

           scrollTop: $(document).height()

       },"slow");

       return false;

   });

})(jQuery);

</script>

 

<!-- ボトムアイコンの設定 -->

<a id="pagebtm" href="#btm" class="page_btm" style="display: none;"><i class="fa fa-arrow-circle-o-down fa-3x"></i></a>

はてなブログ』の使い方は、この本が一番参考になると思います。
私は、何かあったら今でもこの本を確認しています‼️