長い記事を読み終わったとき、すぐにページ上部に戻れる「ページトップボタン」。
設置しておくと、スクロールの手間が減って読者も快適に記事を読めます。
今回は、はてなブログにコピペで設置できる「シンプルなページトップボタン」のCSSとHTMLをご紹介します。
紹介するデザインはこちら
当ブログでは、PC・スマホどちらでも画面右下に固定表示し、背景色＋上向きアイコンで見やすくしています。
シンプルイズベスト！
HTMLコードの設置をする
記事下ではなく「デザイン → フッタ」にコピペで入れてください
下記のコードをコピペして、「フッタ」に入れてください
- <!-- 上に戻るボタンのHTML -->
- <div id="page-top">
- <a href="#">↑</a>
- </div>
アイコンを変えたい場合
上記では「↑」のアイコンを紹介しましたが、記述を変えることで、別のアイコンに差し替えることができます！
アイコンフォントをHTMLで使用するにはアイコンに対応したクラス名を<i>タグもしくは<span>タグで囲います。
- <!--ページトップへ戻る-->
- <a href="#" ><i class="blogicon-chevron-up"></i></a>
「へ」みたいな形のアイコンに変更ができます
blogicon-chevron-up
はてなブログで使えるアイコンフォントは下記の記事を参考にしました。コードの解説とコピー方法が分かりやすいです
CSSコードの設置をする
記事下ではなく「デザイン → CSS」にコピペで入れてください
下記のコードをコピペして、「CSS」に入れてください
- #page-top {
- position: fixed; /* 画面上でスクロールしても固定表示 */
- right: 28px; /* 画面右端から28pxの位置 → 数字を変えて調整可能 */
- bottom: 50px; /* 画面下端から50pxの位置（右下配置の高さ調整） */
- z-index: 9999; /* 他の要素より前面に表示（数字大きいほど手前） */
- }
- #page-top a {
- font-size: 25px; /* アイコンや文字のサイズ */
- color: #ffffff; /* 文字色（白）→ 好きな色に変更OK */
- cursor: pointer; /* マウスを乗せたらポインターになる */
- transition: 0.3s; /* ホバー時の色や背景の変化を0.3秒で滑らかに */
- text-decoration: none; /* リンクの下線を消す */
- display: block; /* ブロック要素にする（サイズ指定のため） */
- width: 45px; /* ボタンの横幅 */
- height: 45px; /* ボタンの高さ */
- border-radius: 50%; /* 丸いボタンにする（100%でもOK） */
- background: #ff8000; /* 背景色（#ff8000 → 好きな色に変更） */
- line-height: 45px; /* テキストやアイコンを縦中央に配置 */
- text-align: center; /* テキストやアイコンを横中央に配置 */
- }
- #page-top a:hover {
- color: #fff; /* ホバー時の文字色（白） */
- background: #ebceb4; /* ホバー時の背景色（#ebceb4 → 好きな色に変更） */
- }
上記の記述では、背景色がオレンジ色になっていますが、ご自身のサイトカラーに合わせたり、サイズや位置も微調整したりするとオリジナリティが出ます...!
まとめ
ページトップボタンは、小さなパーツですが読者のストレスを減らす効果は抜群です。
見た目も使いやすさもアップして、あなたのブログの印象もグッと良くなります。
