animon

animon

アニメとマンガと時々仕事

はてなブログ カスタマイズ part1 

Topに戻るボタン設置をする前に

設置するには最初に管理画面の『設定』項目をクリック。基本設定・詳細設定・公開設定と書かれてると思います。

その中の詳細設定をクリック。

その項目の下の方に『検索エンジン最適化』という項目があります。

その少し右下に『headに要素を追加』にテキストを入力できる項目があると思いますので下のテキストを入れて設定保存をすればとりあえず前準備完了です!

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script>

Topへ戻るの設置

まず、Topへ戻るボタンとは押すとページ上部まで戻ってくることができるボタンです。※スマホでは表示されません。

f:id:yar4-work-on:20170508153011p:plain

このページの右下にも同じボタンが出ていると思いますが、一番上まで行くと消えます。

 

では設定する場所ですが

 

f:id:yar4-work-on:20170508153950p:plain

管理画面の左側にメニューがあると思います。

その中にあるデザインという箇所をクリック。

すると下の画像のような画面になると思います。

f:id:yar4-work-on:20170508154254p:plain

表示されたら

赤い丸のスパナの箇所をクリック

f:id:yar4-work-on:20170508154628p:plain

すると下のような画像の表示になるのでヘッダという箇所をクリック。

f:id:yar4-work-on:20170508154820p:plain

クリックするとヘッダーの項目が広がります。

その中で使うのは赤で囲まれた部分です。

f:id:yar4-work-on:20170508155022p:plain

記入するのは

 <div id="back-to-top"><a href="#">TOPへ</a></div>

<script type="text/javascript">

$(function() {
  $('#back-to-top').hide();
  $(window).scroll(function() {
    if ($(this).scrollTop()>100) {
     $('#back-to-top').fadeIn();
    } else {
     $('#back-to-top').fadeOut();
    }
  });
  $('#back-to-top a').click(function() {
    $('body').animate({
    scrollTop:0
     }, 1000);
     return false;
  });
});

</script>

上記のを張り付ければおおかた出来上がりです。あとは上に行くスピード変更したりと更に細かな設定もできます。

自分が参考にしたものです。

左は辞典なのでわからないとき用ですね。

右ははてなブログのカスタマイズに関して載っていたので参考に購入した感じです。

Kindle版もあるのでAmazonのPrime会員なら月1冊無料なので買う物なければお試しに読んでみるのもいいかもしれないですね。