【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)2019-07-22【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)ブログカスタマイズみなさまお気づきになったでしょうか?つい先日、私のはてなブログに「トップへ戻るボタン」設置いたしました。上まで戻りたいときにすぐ戻れない!ということに気付きました。私も真似しよう!ということで設置してみました。いうということで本日は、はてなブログでの「トップへ戻るボタンの」設置方法をご紹介したいと思います。最後にトップへ戻るボタンとは?そもそも、トップへ戻るボタンとは何ぞや?というところから説明いたします。トップへ戻るボタンとは、その名の通り「読んでいる記事の最上部(トップ)へ戻るボタン」のことです。最近のホームページでは、トップへ戻るボタンが一般的に存在しておりますが、はてなブログの初期設定では存在しないため、自分で導入する必要があります。基本的には下記のコードをコピー&ペーストで設定できます。HTMLデザイン>カスタマイズ>フッターへ以下のソースを貼りつけます。500){このコードで「どれだけスクロールしたら表示するか?」の数字を設定らしいです。数字を少なくすれば早く表示され、大きくすれば遅く表示されます。$("html,body").animate({scrollTop:0},"slow");「scrollTop:0」は「ボタンを押した後、上から何ピクセル目に戻るように設定するか」を意味しており、数値を変更することで好みの位置に戻せます。jQueryを使用しており、ボタンを押すと、流れるようにトップへ戻るように設定しています。これを使用しないと、いきなりトップページへ瞬間移動します。CSSデザイン>カスタマイズ>デザインCSSへ以下のソースを貼りつけます。#3f98ef;}以上となります。TOP」というロゴを入れております。入力する文字を変更すれば、変わります。'\f102';この数字でアイコンの種類を設定しております。他にも種類がありますので載せておきます。'\f0d8';色については、下記のカラーコードをいじって調整してください。下記サイト様を参考に、コードを加えさせて頂きました。ありがとうございます。本当は左下では無く、右下に表示させたかったのですが・・・。私にはワカリマセンデシタ。17:00【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)Tweet関連記事2019-08-18はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法こんばんは。最近ブログのデザインを、いじり倒してる今日この...2019-08-05【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法みなさまこんばんは。スキルOutwardのスキルについて紹介します。ある質問よくある質問を紹介します。Q.オンラ...👈宜しければポチっとお願いします最後までお読み頂き、ありがとうございました。気軽に読者登録して頂ければ幸いです。レビュアーランキングで上位10位以内を狙う方法...2019-10-26仕事の整理術まとめ。関連記事2019-08-25はてなブログで、アンケートをコピペで簡単設置方法2019-08-18はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法2019-08-14【はてなブログ】にほんブログ村のランキングをサイドバーへ表示する方法2019-08-05【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法2019-07-30【2019年最新版】はてなブログProの始め方と追加設定、注意点をまとめてみたこのサイトについてプライバシーポリシーお問い合わせ。