monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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

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

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

ということで、今回は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;
}

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

CSSに

html {
    scroll-behavior: smooth;
}

と記述するだけで戻るときの動きが少し滑らかになるのが簡単で便利です。

JavaScriptを使った時のように途中から表示させるということはできませんが、軽さを求めるならHTMLとCSSだけで作った方が軽いですね。

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。