Bloggerに「ページトップへ戻る（Scroll to Top）」ボタンを設置するのは、読者の利便性を高める素晴らしいアイデアですね。特に記事が長い場合、スマホユーザーには非常に喜ばれます。

HTML/CSS/JavaScriptを組み合わせた、シンプルで洗練されたカスタマイズ方法を解説します。

ステップ1：HTMLコードの追加

まず、ボタンの「器」となるコードを配置します。

  1. Blogger管理画面から [テーマ] ＞ [カスタマイズ] の横の「▼」 ＞ [HTML を編集] をクリックします。

  2. エディタ内をクリックし、Ctrl + F（Macは Cmd + F）で </body> を検索します。

  3. </body> の直前に以下のコードを貼り付けてください。

HTML
<div id='back-to-top' onclick='window.scrollTo({top: 0, behavior: "smooth"});'>
  <svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="white"/>
  </svg>
</div>

ステップ2：CSSでデザインを整える

次に、ボタンを画面の右下に固定し、見た目を整えます。

  1. 同じ編集画面で <b:skin>...</b:skin> の間、または ]]></b:skin> の直前に以下のコードを貼り付けます。

CSS
#back-to-top {
  position: fixed;
  bottom: 30px; /* 下からの位置 */
  right: 30px;  /* 右からの位置 */
  width: 50px;
  height: 50px;
  background-color: #333; /* ボタンの色 */
  border-radius: 50%; /* 円形にする */
  display: none; /* 最初は隠しておく */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

#back-to-top:hover {
  background-color: #555; /* ホバー時の色 */
  transform: translateY(-5px); /* 少し浮く演出 */
}

#back-to-top svg {
  width: 30px;
  height: 30px;
}

ステップ3：JavaScriptでスクロール時に表示させる

「ある程度スクロールしたらボタンを表示させる」ための制御を追加します。

  1. 最初に貼り付けたHTMLコードのすぐ下（</body> の直前）に、以下のスクリプトを貼り付けます。

JavaScript
<script>
window.onscroll = function() {
  var topBtn = document.getElementById('back-to-top');
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    topBtn.style.display = "flex";
  } else {
    topBtn.style.display = "none";
  }
};
</script>

動作の仕組み

要素役割
HTML画面上にボタン（SVGアイコン）を作成します。
CSSボタンを右下に固定し、円形や影などのデザインを適用します。
JavaScriptスクロール量が 300px を超えた時にボタンを表示させ、クリック時にスムーズに一番上へ戻る処理を行います。

💡 カスタマイズのヒント

  • 色を変えたい: CSSの background-color をお好みのカラーコード（例: #ff5722）に変更してください。

  • 位置を変えたい: bottom や right の数値を調整してください。

設定が終わったら、右上の [保存]（フロッピーディスクのアイコン） を押して完了です！

「ボタンのアイコンを矢印ではなくテキスト（TOPなど）に変えたい」といったご要望はありますか？必要であればコードを書き直しますよ。