Squarespaceにトップに戻るボタンを追加する方法

Squarespaceにトップへ戻るボタンを追加すれば、顧客に喜んでもらえるでしょう。しかし、この機能は見た目ほど単純ではありません。Squarespaceには、ネイティブのトップへ戻るボタンがないのです。そのため、ノーコードのウィジェット、少しのカスタムコード、またはアンカーリンクを使って対応する必要があります。

これは間違いなく取り組む価値があります。長いランディングページや内容の深いブログ記事では、訪問者が長いスクロールの一番下に取り残されてしまいます。今日では閲覧の大半がモバイルで行われており、親指でずっと上までスクロールするのは、訪問者の関心を失う手っ取り早い方法です。

トップへ戻るボタンがあれば、訪問者は離脱せずにサイト内を回遊し続けてくれます。これは小さなナビゲーションの改善ですが、実際に訪問者を引きつけ続けるウェブサイトの作り方という、より広い戦略を支えるものです。

このガイドでは、まず最も簡単なノーコードの方法を説明し、その後、よりデザインの自由度を求める方や、シンプルな組み込みオプションを使いたい方向けに、2つの代替手段を紹介します。

最も簡単な方法：Squarespace向けのトップへ戻るウィジェットを使う

最も手早い方法は、構築済みのトップへ戻るウィジェットを見つけることです。たとえば、Jotformのトップへ戻るウィジェットは、無料でノーコードのツールで、わずか数分でこれらのボタンをページ上で公開できます。これを使えば、フローティングボタンをデザインし、埋め込みコードを生成して、CSSやJavaScriptを一行も触ることなくSquarespaceに配置できます。

手順は次のとおりです。

1. ウィジェットをカスタマイズする。 上記のリンクからJotformのウィジェットビルダーを開き、パラメータの調整を始めましょう。アイコンのスタイルを変更したり、ボタンのサイズや角の丸みを設定したり、ブランドに合わせて色を選んだりできます。このウィジェットを使えば、画面上でボタンを移動させたり、端の余白を調整したり、デスクトップとモバイルのユーザーごとに表示のオン・オフを切り替えたりするのも簡単です。

2. 埋め込みコードを取得する。 ボタンが思いどおりの見た目になったら、Jotformがすぐに使える埋め込みコードを生成します。プラグインのインストールも、セットアップの手順も、面倒な作業も不要です。

3. Squarespaceに貼り付ける。 ここでSquarespaceの現在のインターフェースを使います。主に2つの選択肢があります。

• サイト全体（トップへ戻るボタンにおすすめ）： Squarespaceのダッシュボードで、左メニューのページに移動し、下にスクロールしてカスタムコードのセクションを見つけ、コードインジェクションをクリックします。フッター欄に埋め込みコードを貼り付け、保存をクリックします。ボタンは自動的にすべてのページに表示されます。（注意：サイト全体のコードインジェクションは、ビジネスプラン以上で利用できます。）

• 単一ページのみ： ボタンを配置したいページを編集し、+をクリックしてブロックを追加し、コードを選択します。そこに埋め込みコードを貼り付けて保存します。ボタンはそのページにのみ表示されますが、必要な任意のページで同じ手順を繰り返すことができます。

これで完了です。サイトを更新すると、ボタンが表示され、訪問者をページのトップへ戻す準備が整います。Squarespaceにフォームを追加する手順を実行したことがあれば、ここでの埋め込みの流れはまったく同じだと感じるでしょう。

この方法が最も手間のかからない方法になりやすい、いくつかの実用的な理由を紹介します。

• 自動的に更新されます。来月に色や位置を変更しようと思ったら、Jotformでウィジェットの設定を編集するだけです。すると公開中のウィジェットに変更が反映されます。コードを貼り直す必要はありません。
• お知らせバー、ソーシャルフィード、お問い合わせボタンなど、あなたが使いたいと思うかもしれない他の無料のウェブサイトウィジェットと並行して動作します。それらはすべて同じ埋め込み方式を使用します。
• Squarespaceの他の設定ともうまく連携します。フォームを通じてリードを集めている場合でも、JotformとSquarespaceの連携により、同じ埋め込みパターンを使って新しいフォーム、決済、リード獲得の仕組みを簡単に追加できます。

ほとんどのSquarespaceユーザーにとって、作業はここで終わりです。しかし、ピクセル単位での完全なコントロールを求めるなら、読み進めてください。

代替方法：カスタムコードでSquarespaceにトップへ戻るボタンを追加する

HTML、CSS、そして少しのJavaScriptに慣れているなら、フローティングのトップへ戻るボタンを完全にゼロから作ることができます。Squarespaceは、コードインジェクションパネル、カスタムCSSパネル、そして個別のコードブロックを通じて、カスタムコードを公式にサポートしています。

ただし、これにかかる時間には注意してください。ボタン自体の自由度は高まりますが、その分、テストやトラブルシューティングもより多く必要になります。そのため、この選択肢は通常、非常に特定の見た目を必要とする開発者にのみ適しています。また、アニメーション、スクロールのしきい値、ブレークポイントの動作を細かく制御したい場合にも使えるでしょう。

その方法は次のとおりです。

1. コードを配置する場所を選ぶ。 サイト全体に表示するボタンの場合は、ウェブサイト → ページ → コードインジェクション → フッターを使います。ここに追加したコードは、すべてのページの閉じタグ </body> の直前に挿入されます。特定のページだけに1回限りのボタンを表示する場合は、ページパネルでそのページにカーソルを合わせ、歯車アイコンをクリックし、詳細設定を選択して、代わりにページヘッダーのコードインジェクションを使います。
2. HTMLを追加する。 後で対象にできるように、IDを付けたボタン要素を配置します。多くの場合、次のようになります：<button id=”backToTop” aria-label=”Back to top”>↑ Top</button>。スクリーンリーダーのアクセシビリティを助けるため、aria-labelは必ず残しておきましょう。
3. CSSでスタイルを設定する。 次に、CSSでボタンの見た目と動作を編集します。まずカスタムCSSパネル（ウェブサイト → ウェブサイトツール → カスタムCSSの下）を開きます。ボタンを右下に固定（fixed）で配置します。次に、opacity: 0 と pointer-events: none を設定して、デフォルトでは非表示にします。また、.visible のようなクラスが追加されたときにスムーズにフェードインするトランジションも設定したいところです。最後に、コンテンツより上でモーダルより下に表示されるよう、z-index の値を十分に高く設定します。
4. JavaScriptのロジックを追加する。 スクロール位置を監視する小さなスクリプトも必要です。そうすることで、ボタンはユーザーにとって関連性のあるときにのみ表示されます。たとえば、訪問者が選択したしきい値（たとえば300ピクセル）を超えてスクロールすると、スクリプトが自動的に .visible クラスを追加し、ボタンが表示されます。ユーザーがボタンをクリックすると、window.scrollTo({ top: 0, behavior: ‘smooth’ }) が呼び出され、スムーズなアニメーションでページをトップまでスクロールして戻します。

この方法の最大の利点はデザインの自由度ですが、それはほとんどの企業に必要なものではありません。コードなしでアプリを構築できるjotformアプリのようなウィジェットやツールは、ボタンを自分好みに仕上げるのに十分な柔軟性を備えており、多くのコーディング時間を節約できます。さらに、Squarespaceがテンプレートに新しい構造上の変更をリリースするたびに、コードを更新する必要もありません。

簡単な回避策：アンカーリンクをトップへ戻るショートカットとして使う

フローティングボタンは実際には必要なく、長いセクションの一番下にクリックできるトップへ戻るリンクがあればいいという場合は、Squarespaceの組み込みのアンカーリンク機能がコードなしでその役割を果たします。Squarespaceは2025年に、Squarespace 7.1の一部としてこの機能を追加しました。その仕組みは次のとおりです。

1. トップセクションにアンカーを設定する。 トップへ戻るショートカットを設置したいページで編集をクリックします。一番最初のセクションにマウスカーソルを合わせ、セクションを編集をクリックします。そこから、セクション設定パネルの一番下にあるアンカーリンク欄までスクロールします。「top」のようなスラッグを入力し、コピーアイコンをクリックしてURLを取得します。

2. 好きな場所にトップへ戻るリンクを追加する。 ページの下の方にボタンブロックを追加するか、テキストブロックを追加します。テキストまたはボタンを選択し、リンクアイコンをクリックして、アンカーURLを貼り付けます。訪問者がそれをクリックすると、ページはそのトップセクションまで戻ります。

3. オプション：スクロールをなめらかにする。 アンカーリンクはユーザーを瞬時にページのトップへ移動させますが、これは唐突に感じられ、サイトへの没入感を損なうことがあります。これは、穏やかなスクロールアニメーションを追加することで解決できます。ウェブサイト → ページ → カスタムCSSに移動し、次を追加します。

html {

  scroll-behavior: smooth;

}

この1行で、サイト全体のすべてのアンカーリンクにスムーズなスクロールが適用されます。

この方法にはいくつか明らかな制約があります。フローティングではないため、訪問者はページの特定の位置（通常は長いセクションの終わりやフッター付近）でしかリンクを目にしません。また、ウィジェットやサイト全体のカスタムコードボタンのように、すべてのページに自動的に表示されるわけでもありません。とはいえ、長いブログ記事やセールスページ、あるいは手早く上部へスクロールできればよい1ページ構成のサイトであれば、アンカーリンクで十分なことが多いです。

注意：アンカーリンクは、ブログ、イベント、ポートフォリオ、ストアのセクションでは直接サポートされていません。これらのページで使うには、サポートされていないセクションの上に空白のセクションを追加し、代わりにそこへアンカーを設定する必要があります。空白セクションの設定で画面いっぱいに表示（Fill Screen）をオフに切り替えれば、見栄えを整えられます。そうしないと、ページ上部に不自然な余白ができてしまいます。

Squarespaceを複雑にせずにトップへ戻るボタンを追加する

Squarespaceを複雑にすることなくこれらのボタンを追加する最も簡単な方法を探しているなら、ノーコードのウィジェットが最速で最も柔軟な選択肢です。たとえば、Jotformのトップへ戻るウィジェットを使えば、コードを一行も書くことなく、デザイン、埋め込み、更新ができます。

カスタムコードはデザインを完全にコントロールできるため、非常に具体的なビジュアルの目標がある場合に役立ちます。ネイティブのアンカーリンク機能は手頃な回避策ですが、それほど多くのコントロールは得られません。どれを選ぶにしても、サイトに必要なものに方法を合わせ、作り込みすぎないようにしましょう。

今日、トップへ戻るウィジェットを試して、洗練されたトップへスクロールするボタンを数分であなたのSquarespaceサイトに追加しましょう。そしてすでにSquarespaceフォームにJotformを使っているなら、埋め込みの流れは最初のクリックから見覚えがあるはずです。