ページトップへ戻るボタン、記事が見やすいので設置したよ はてなブログ

こんにちは、ななです。

最近はてなぷろになり、独自ドメインを取得しました。

ブログって単純につらつら書いてるだけかと思ってましたが、やっぱり読者に見てもらいたい！って事で、機械にスーパー苦手だけどCSSとかHTMLとかも勉強しなきゃなって思ってます。どれだけ苦手でポンコツかはこれを見てもらったらわかります。

www.tihouzaijyuu.com

 記事って長いもので、2500字程度ありますよね。上の画面に一気に飛べたら、読みやすいです。

現に友達にも画面の移動がみにくいよーーー！！！って言われました。

って事で、本日は「ページトップへ戻るボタン」の設置

上手くいけば、マウスをせっこらせっこら回さなくてもＯＫ

nohack-nolife.hatenablog.com

今回はあくあのーと (id:AquaNote)さんのブログを参考させていただきました。

ありがとうございます。めちゃくちゃ読みやすいです。

まずは、HTMLとJavaScriptのコードをコピーし、貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#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>

貼り付ける場所は

ダッシュボード→デザイン→カスタマイズ（真ん中のスパナマーク）→フッタ

次に、ＣＳＳコードをコピーして貼り付けます。

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:20px;
    text-decoration:none;
    background:#000;
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
    background:#e74c3c;
}

貼り付ける場所は

ダッシュボード→デザイン→カスタマイズ（真ん中のスパナマーク）→デザインＣＳＳ

ボタンの背景色や文字色を変えたい場合や表示位置を変えたい場合も、コードをいじれば出来ます。今回私はしていないので、元ネタのあくあのーとさんの記事を参考にして下さい。また、スマホはレスポンシブに設定してますので、私はいじってませんが

違う設定にしてる方は、スマホの方も設定を変更してください。

まとめ

以前から、気になってた設置ボタン。コード等が分からない私でも、簡単に設置できました。ブログの記事がうーーんと見やすくなったので、まだしてない方もすぐにでも、やってみよおおお。