サイトにボタンを追加する

訪問者がコンテンツを見たり重要な情報を見つけたりしやすいように⁠、ボタン リンクを作成します⁠。

最終更新日 2025年1月21日

訪問者にコンテンツへの参加を促すボタンをサイトに追加できます⁠。ボタンは視覚要素としてペ⁠ージに追加され⁠、どこをクリ⁠ックするのかを訪問者が簡単に把握できるようになります⁠。

最大限の効果を引き出すためにも⁠、ボタンのテキストは短く魅力的なものにすることをおすすめします⁠。「⁠Donate (⁠寄付する⁠)⁠」や「⁠Take action (⁠行動する⁠)⁠」などの短いキ⁠ー フレ⁠ーズを試してみてください⁠。

このガイドでは⁠、サイトにボタンを追加する様⁠々な方法を説明します⁠。

できるだけ広い範囲のユ⁠ーザ⁠ーがサイトのコンテンツにアクセスできるようにするには⁠、Squarespaceのアクセシビリテ⁠ィ リソ⁠ースをご覧ください⁠。

動画を見る

ボタン ブロ⁠ックで任意の場所にボタンを追加する

ボタン ブロ⁠ックは⁠、サイトにコ⁠ール ト⁠ゥ アクシ⁠ョンを追加するための最も汎用性の高い方法です⁠。サイト上の任意の創造エデ⁠ィタ⁠ーセクシ⁠ョンまたはクラシ⁠ック エデ⁠ィタ⁠ーのコンテンツ エリアにボタン ブロ⁠ックを追加し⁠、レイアウトでどのように表示されるかをカスタマイズできます⁠。

ボタン ブロ⁠ックは⁠、サイト コンテンツ⁠、外部コンテンツ⁠、フ⁠ァイル⁠、メ⁠ールアドレス⁠、電話番号にリンクできます⁠。詳細については⁠、「⁠ボタン ブロ⁠ック⁠」をご覧ください⁠。

Button_1.png

ヘ⁠ッダ⁠ー ボタン

ヘ⁠ッダ⁠ーにボタンを追加すると⁠、ペ⁠ージの上部にコ⁠ール ト⁠ゥ アクシ⁠ョンが表示されます⁠。これにより⁠、訪問者はすぐにボタンをクリ⁠ックするよう誘導されます⁠。ヘ⁠ッダ⁠ー ボタンの詳細については⁠、「⁠サイト ヘ⁠ッダ⁠ーを構築する⁠」をご参照ください⁠。

Squarespace_7.1_header_button.jpg

バナ⁠ー ボタン

バナ⁠ー ボタンは⁠、背景やバナ⁠ー画像で目立ちます⁠。訪問者がサイトにアクセスしたときに特定のアクシ⁠ョンを実行してもらいたい場合は⁠、見逃しにくいバナ⁠ーボタンを追加してください⁠。

バ⁠ージ⁠ョン7⁠.1のサイトの場合は⁠、ブロ⁠ック セクシ⁠ョンに背景画像を追加してから⁠、ボタン ブロ⁠ックを追加します⁠。バ⁠ージ⁠ョン7⁠.0のサイトの場合は⁠、バナ⁠ー ボタンのオプシ⁠ョンはテンプレ⁠ートによ⁠って異なります⁠。

Banner_image_button_on_Brine.png

フ⁠ッタ⁠ー ボタン

フ⁠ッタ⁠ーは⁠、サイトの最下部にあるセクシ⁠ョンです⁠。多くの場合⁠、このセクシ⁠ョンにはサイトやビジネスに関する詳細が含まれます⁠。フ⁠ッタ⁠ーにボタンを追加すると⁠、訪問者が重要な情報を見つけたり⁠、主なコンテンツを閲覧した後に特定のアクシ⁠ョンを実行したりしやすくなります⁠。詳細については⁠、「⁠フ⁠ッタ⁠ーを編集する⁠」をご参照ください⁠。

Squarespace_version_7.1_footer_button.jpg

自動レイアウト ボタン

コ⁠ール ト⁠ゥ アクシ⁠ョンの様⁠々なフレ⁠ーズを宣伝したり⁠、他のプロジ⁠ェクトにリンクしたり⁠、チ⁠ームを紹介したりするには⁠、自動レイアウトを使用します⁠。自動レイアウトは⁠、複数のコンテンツを列と行で並べます⁠。自動レイアウトの各アイテムにはボタンを含めることができ⁠、セクシ⁠ョン全体でアイテムの上または下にボタンを追加できます⁠。詳しくは⁠、「⁠自動レイアウト⁠」をご覧ください⁠。

Auto_layout_item_buttons_and_section_button.png

フ⁠ォ⁠ームとニ⁠ュ⁠ースレタ⁠ー ブロ⁠ックのボタン

問い合わせやニ⁠ュ⁠ースレタ⁠ーの登録に訪問者を誘導するには⁠、フ⁠ォ⁠ーム ブロ⁠ックまたはニ⁠ュ⁠ースレタ⁠ー ブロ⁠ックを追加します⁠。どちらのブロ⁠ックにも⁠、既定で [⁠送信⁠] または [⁠サインア⁠ップ⁠] ボタンが含まれていますが⁠、このテキストはカスタマイズできます⁠。詳細については⁠、「⁠フ⁠ォ⁠ーム ブロ⁠ック⁠」または「⁠ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック⁠」をご覧ください⁠。

Button_4.png

コマ⁠ースと寄付のボタン

訪問者が商品を購入したり寄付を行⁠ったりする場合は⁠、Commerceプランのボタンや寄付ボタンを使用してそのプロセスを完了できます⁠。

画像ブロ⁠ック ボタン

クラシ⁠ック エデ⁠ィタ⁠ーのほとんどの画像ブロ⁠ック レイアウトでは⁠、レイアウトに応じ⁠、クリ⁠ックスル⁠ー リンクを画像の上⁠、横⁠、または下にボタンとして表示できます⁠。この方法を使用して⁠、リンクに画像を含めます⁠。創造エデ⁠ィタ⁠ーを使用している場合は⁠、画像ブロ⁠ックにボタン ブロ⁠ックを配置して⁠、これらのレイアウトを再現してください⁠。詳細については⁠、「⁠画像ブロ⁠ック⁠」をご覧ください⁠。

プロモ⁠ーシ⁠ョン ポ⁠ップア⁠ップ ボタン

訪問者がサイトにアクセスしたときに表示されるポ⁠ップア⁠ップを作成し⁠、そのポ⁠ップア⁠ップにボタンを最大2つ追加できます⁠。プロモ⁠ーシ⁠ョン ポ⁠ップア⁠ップは⁠、サイトおよびサイトに追加するコ⁠ール ト⁠ゥ アクシ⁠ョンに合わせてカスタマイズできます⁠。詳細については⁠、「⁠プロモ⁠ーシ⁠ョン ポ⁠ップア⁠ップを作成する⁠」をご参照ください⁠。

Pinterestの保存ボタン

サイト上の特定の画像にPinterestの保存ボタンを追加して⁠、訪問者がPinterestでコンテンツを共有できるようにします⁠。画像が共有されることで⁠、より多くの訪問者にサイトを見つけてもらうことができます⁠。詳しくは⁠、「⁠Pinterestの保存ボタンを追加する⁠」をご参照ください⁠。

バ⁠ージ⁠ョン7⁠.0のボタン

サイトがバ⁠ージ⁠ョン7⁠.0の場合は⁠、次のオプシ⁠ョンを使用してボタンを追加することもできます⁠。

  • コンテンツ サイドバ⁠ー - テンプレ⁠ートでコンテンツ サイドバ⁠ーがサポ⁠ートされている場合は⁠、ペ⁠ージの一部または全体にボタン ブロ⁠ックを表示できます⁠。
  • カバ⁠ー ペ⁠ージ ボタン - カバ⁠ー ペ⁠ージに⁠、サイトのコンテンツまたは外部コンテンツにリンクするボタンを最大2つ追加できます⁠。
  • ペ⁠ージ ヘ⁠ッダ⁠ー (⁠イントロダクシ⁠ョン エリアと呼ばれることもあります⁠) - ボタン ブロ⁠ックを追加して⁠、個⁠々のペ⁠ージのペ⁠ージ コンテンツの上にボタンを表示します⁠。
  • 共有ボタン - 共有ボタンを有効にして⁠、ブログ投稿や商品などのコンテンツを訪問者がソ⁠ーシ⁠ャル メデ⁠ィアのプロフ⁠ィ⁠ールで共有できるようにします⁠。

ボタンのスタイル設定

サイト全体の外観と雰囲気に合わせてボタンをカスタマイズできます⁠。たとえば⁠、ほとんどのボタンで以下の項目を変更できます⁠。

  • 背景の色
  • フ⁠ォント
  • 図形
  • サイズ

どのボタンもテキストに合わせてサイズと形状が変わるため⁠、ボタンの外観を最大限に制御するためにも⁠、ボタン テキストを25文字以下にとどめることをおすすめします⁠。

スタイル設定のオプシ⁠ョンは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。詳しくは⁠、「⁠ボタンのスタイル設定⁠」をご覧ください⁠。

分析でボタンのクリ⁠ックを追跡する

フ⁠ォ⁠ームとボタンのコンバ⁠ージ⁠ョン分析では⁠、訪問者がコンテンツ関連のボタンをクリ⁠ックする頻度を確認できます⁠。このパネルのインサイトを利用して⁠、どのボタンが最も効果的かを比較し⁠、スタイルや位置の変更がボタンのクリ⁠ックにどのように影響するかを時系列で理解できます⁠。

パ⁠ーチ⁠ェス フ⁠ァネル分析では⁠、商品の [⁠カ⁠ートに追加⁠] ボタンをクリ⁠ックした顧客の数を確認できます⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。