トップへ戻るのボタンをHTMLとCSSのシンプルなものに変更｜はてなブログカスタマイズ

前回は、JavaScriptを使ってブログのトップへ戻るのボタンを作ったのですが、buttonタグを使ってトップへ戻るのボタンを作ると、buttonタグには文字が必要というエラーが出てきてしまうことに気づきました。

過去記事：トップへ戻るのボタンを作る｜はてなブログカスタマイズ - monoのメモ帳

HTMLとCSSだけのトップへ戻るボタン　HTMLサンプル
HTMLとCSSだけのトップへ戻るボタン　CSSサンプル

ということで、今回はbuttonタグの代わりにaタグを使ってトップへ戻るのボタンを作ることにしました。

やりたいこと

JavaScriptを使わずのトップへ戻るのボタンを作りたい（軽くしたい）
動きは少しゆっくりと戻したい

HTMLとCSSだけのトップへ戻るボタン　HTMLサンプル

<a href="#" class="moveToTop"><i class="blogicon-chevron-up"></i></a>

「管理画面」→「デザイン」→「カスタマイズ」 →「フッタ」にコピペします。

HTMLとCSSだけのトップへ戻るボタン　CSSサンプル

/* トップへ戻るボタン */
.moveToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: rgba(132,177,201,.7);/* ボタンの色 */
    padding: 15px;
    border: solid 1px #84b1c9;/* ボタンの外周の色 */
    border-radius: 50%;
    color: #fff;/* 矢印の色*/
    line-height: 15px;
    text-align: center;
}
a.moveToTop:hover {
    color: #fff;
    opacity: .7; 
}
html {
    scroll-behavior: smooth;
}