はてなブログにトップへ戻るボタンを導入するのでR

WordPressでは、プラグインで実現できる、トップへ戻るボタンであるが、はてなブログではプラグインはないのでR。

そこで実装する必要があるのでR。

詳しくは、この方の記事を参考に、一部自分用に修正したのでRが、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッター」に、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
   $(window).scroll(function() {
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
          $('#pagetop').fadeOut();
       }
   });
   $('#pagetop').click(function() {
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
});
</script>
 
<a id="pagetop" href="#top" class="page_top" style="display: none;">^</a>

をまず記述するのでR。

そして、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#pagetop {
    position:fixed;
    bottom:7px;
    right:7px;
    padding:10px 12px;
    color: #353535;
    font-size:16px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
    );
    background-size: 4px 4px;
    border: 3px solid #c9c19f;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 99;
}
 
#pagetop a:hover {
    color: #ffffff;
    background:#c9c19f;
}

を記述すれば、基本的にこれでOKであったのでR。

ただし、この方の記事とややデザイン上で異なっているので、そこは自己修正が必要となるのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。