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

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

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

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

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

<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」に、

#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。

広告



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