フジブロっ!
はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ
トップ > カスタマイズ > HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】
本ページはプロモーションが含まれていますサイト下に固定するボタン
- ボタンを常に表示はしたくない
- でもトップへ戻るボタンは設置したい
フッターとの隙間が気になる場合は、 #footer とすることで隙間をなくすことが出来ます。
追従するボタン
- ボタンを常に表示していたい
- ヘッダー下におすすめ記事を設置してあり、トップへ戻って回遊してもらいたい
小洒落た感じの追従するボタン
小洒落た追従するボタンのHTML a href="#" id="page-top">TOP 小洒落た追従するボタンのCSS /***追従するトップへ戻るボタン***/ #page-top position: fixed; right: 5px; bottom: 20px; height: 50px; text-decoration: none; font-weight: bold; transform: rotate(90deg); font-size: 90%; line-height: 1.5rem; color: #737373; padding: 0 0 0 35px; border-top: solid 1px; > #page-top::before content: ""; display: block; position: absolute; top: -1px; left: 0px; width: 15px; border-top: solid 1px; transform: rotate(35deg); transform-origin: left top; > /***トップへ戻るボタンここまで***/その場合は color: #737373; の#数字の部分を変えて色を調整してください。
border に色の指定をしていないので、 color を変えれば連動して線の色も変わります。
さらにエフェクトを追加する
CSSのみ!簡単にスムーズスクロールを導入する サイト内の指定した場所にリンクしてユーザビリティを上げる! サイドバーを固定して追従させるカスタマイズおすすめ記事
はてなブログカスタマイズまとめ-カスタマイズマップを作成しました はてなブログの新しいテーマ【Cappuccino】を公開しました! 【Cappuccino】着せ替えデザイン12種類 はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 HTMLとCSSのみで作るトップへ戻るボタン【デザイン3種類】 サーチコンソールで「CLS に関する問題」が出た時の対処法 \よければシェアお願いします/ フジグチ - ガテン系ブロガー -- Cappuccino
- Neumorphism
Copyright © 2020 fuji-blo.com