はてなブログ記事の「トップに戻る」(2019年2月16日更新)
- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: Kindle版
- この商品を含むブログを見る
はてなブログ記事の「トップに戻る」
読みやすいブログ作成のため「トップに戻る」機能を追加してみました。
参考記事通りに本当にコピー&ペーストで実装出来るので簡単です。
私の「トップに戻る」ボタンの { } デザイン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:hover { color: #ffffff; /* 文字色 */ background:#c9c19f;/* 背景色 */ }
参考
はてなブログ Perfect GuideBook
- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: Kindle版
- この商品を含むブログを見る