今まで作ってきた「上に戻るボタン」と「画像で上に戻るボタン」を応用してコピペで簡単にはてなブログに設置できる「上に戻るボタン」を作成しました（バージョン2）。
個人的には「上に戻るボタン」はいらない派ですが、ブログを作ったら何かしらカスタマイズしてみたいじゃないですか。いるいらないじゃなくて、作って設置して自己満足したい！
「上に戻るボタン」のコード
次のコードをすべてコピーして「デザイン→カスタマイズ→フッタ」に貼り付けます。
<!-- 上に戻るボタンのHTML -->
<a id="pagetop" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<i class="blogicon-chevron-up"></i>
</a>
<!-- 上に戻るボタンのCSS -->
<style>
/* ボタンの位置 */
#pagetop {
position: fixed; /* ボタンを固定表示 */
right: 0px; /* ボタンの位置（右） */
bottom: 0px; /* ボタンの位置（下） */
}
/* ボタンのデザイン */
.blogicon-chevron-up {
height: 56px; /* ボタンの大きさ（縦） */
width: 56px; /* ボタンの大きさ（横） */
border-radius: 50%; /* ボタンの丸さ */
background: #000; /* ボタンの色 */
font-size: 30px; /* ボタンの文字の大きさ */
color: #fff; /* ボタンの文字の色 */
line-height: 56px; /* ボタンの文字を縦中央揃え */
text-align: center; /* ボタンの文字を横中央揃え */
cursor: pointer; /* カーソルをポインターに */
}
/* スマートフォン用（ボタンを消す） */
@media (width <= 480px) {
#pagetop {
display: none;
}
}
</style>
「上に戻るボタン」のHTMLについて
「上に戻るボタン」のHTMLでは「<i class="blogicon-chevron-up"></i>」でボタンを表示、「onclick="～”で囲まれた部分」でボタンの動作を設定します。
ボタンの動作はHTMLのonclick属性でJavaScriptのwindow.scrollToを使用、スムーズにスクロールします。
※ ボタンは固定表示でスクロールしてふわっと表示させたりできません。
SOFTELメモ「上に戻るボタン」のCSSについて
「上に戻るボタン」のCSSでははてなのアイコンフォントを使って表示したボタンの位置とデザインを調整します。
スマートフォン（画面の横幅が480px以下）では「上に戻るボタン」を非表示にしていますが、スマートフォンでもボタンを表示させたいときは「@media (width <= 480px) {」以降のコードを消してください。
※ フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は<style>と</style>の記述は不要です。
まとめ
元々は、はてなブログのフッタに「上に戻るボタン」を設置するという記事を考えていましたが、デザインテーマによってはフッタの縦幅がまちまちで汎用的なコードにできなかったのであきらめました。
新しく「上に戻るボタン」を作るなら、コードはできるだけコンパクトに、はてなのウェブフォントで簡単に表示できるようになど、コピペしてすぐ使えるように心がけました。
また、コードごとにコメントをつけてカスタマイズしやすくしたつもりです。
ありふれたブログカスタマイズの代表的なひとつですが、よかったら試してみませんか？
