【硬派上等】シンプルすぎるコードで「上に戻る」ボタンをコピペで簡単に設置しよう！【はてなブログ】
おはようございます、こんにちは、こんばんは、はてなブロガーの瀬木冬子（せき とうこ）です。
今回はブログお馴染みの右下に出る「上に戻るボタン」「トップに戻るボタン」のコードをご紹介致します！
JavaScriptもJQueryもFontAwesomeも一切使わない、超シンプルで軽量のコードで気持ちも楽々にいきましょう！
最新版です！ よろしくお願い致します！
ボタンについて
今回ははてなブログユーザーは誰でも使うことのできる、はてなブログ公式アイコンフォントを使用します。
全部で120種類以上あるアイコンの中から、上向きの矢印「blogicon-chevron-up」を選びました。
コードについて
JavaScriptもJQueryもFontAwesomeも導入しません！
なので今回は<head>に要素を追加する必要も、よくわからない長いコードの羅列を入力する必要もありません！
「フッタ」と「デザインCSS」に数行のコードをコピペしたら完成です！
必要なコード
はてなブログ→デザイン→フッタ・デザインCSS
2か所にコードを入力するのでご準備ください！
フッタに入力するHTMLコード
<p id="backtop"><a href="#top"><i class="blogicon-chevron-up lg"></i></a></p>
そのままコピーして「フッタ」に貼り付けてください。
実はヘッダでも問題ありません。
「backtop」→名前です
「#top」→これがあるとトップに飛べます
「blogicon-chevron-up」→矢印です
「lg」→少し大きくなります
デザインCSSに入力するコード
/*上に戻るためにあるコード*/
#backtop {
position: fixed;
bottom: 39px;
right: 39px;
}
#backtop a {
text-decoration: none;
}
そのままコピーして「デザインCSS」に貼り付けてください。
デザインCSSにたくさんコードがあると動かない可能性があるので、そのときはできるだけ上に貼り付けるようにしてください。
「#backtop」→名前です
「position」→じっとしてなさい
「bottom」→画面下からの距離です
「right」→画面右からの距離です
「text-decoration」→これがないとリンクの下線が付いてしまいます
位置はご自分のブログに合わせて調整してみてくださいね！
ポイント＆チップス
・最軽量で最速の上に戻るボタン
・ボタンにははてなブログアイコン素材を使用
・コードを入力する場所は2か所だけ
・フッタに1行
・デザインCSSに9行
・ボタンの位置はブログに合わせて調整
おわりに
ここまでご苦労様でした！
超シンプルなコードをご紹介致しました！ 無事に設定できたでしょうか？
シンプルが故にアニメーションがなかったり動きが固いように見えますが、軽量さではどこにも負けません！
皆さんのブログが少しでも快適に改善できたならば幸いです！
今回はこれまで！
はてなブロガー、瀬木冬子（せき とうこ）がお送り致しました！ お読みくださりありがとうございます！
