ボタンのスタイル設定

ブランドに合うように⁠、サイトのボタンをカスタマイズします⁠。

最終更新日 2025年1月31日

サイト スタイルを使用して⁠、サイト上のボタンの外観を編集します⁠。色⁠、形状⁠、テキスト スタイルを変更できます⁠。これはコ⁠ール ト⁠ゥ アクシ⁠ョンをサイトのビジ⁠ュアル デザインに合わせるのに最適な方法です⁠。外観の一貫性を確保するため⁠、スタイルの変更はサイト上のほとんどのボタンに反映されます⁠。

動画を見る

この機能へのアクセス

このガイドでは⁠、バ⁠ージ⁠ョン7⁠.1のボタンのスタイル オプシ⁠ョンを取り上げます⁠。バ⁠ージ⁠ョン7⁠.0でのボタンのスタイル設定については⁠、「⁠バ⁠ージ⁠ョン7⁠.0のボタンのスタイル⁠」を参照してください⁠。

ボタンの形状とフ⁠ォント

ボタンのスタイルを設定するときは⁠、ボタンのあるペ⁠ージを開くことをおすすめします⁠。これにより⁠、変更を加えたときにサイト プレビ⁠ュ⁠ーで変更を確認できます⁠。サイト全体のボタンのスタイルを設定するには⁠、以下の手順に従います⁠。

  1. [⁠サイト スタイル⁠] パネルを開き⁠、[⁠ボタン⁠] の横にあるをクリ⁠ックします⁠。
  2. スタイルを設定するボタンのタイプ (⁠[⁠プライマリ⁠]⁠、[⁠セカンダリ⁠]⁠、[⁠タ⁠ーシ⁠ャリ⁠]⁠) をクリ⁠ックします⁠。詳細については⁠、「⁠ボタンのタイプ⁠」を参照してください⁠。

タイプごとに次の微調整オプシ⁠ョンを設定できます⁠。

  • テキスト - その階層内のボタンのフ⁠ォントとフ⁠ォント スタイル⁠。
  • 図形 - 図形⁠。また⁠、ボタンに色の塗りつぶしがあるか (⁠[⁠塗りつぶし⁠]⁠) 外枠のみ (⁠[⁠塗りつぶしなし⁠]⁠) かを指定します⁠。
  • 外枠 - [⁠塗りつぶしなし⁠] ボタンの場合⁠、ボタンの外枠のの太さ⁠。[⁠塗りつぶし⁠] ボタンの場合⁠、外枠スライダ⁠ーを変更すると⁠、ボタンの外側のパデ⁠ィングが変更されます⁠。
  • 左右のパデ⁠ィング - ボタン テキストの左右のパデ⁠ィング⁠。
  • 上下のパデ⁠ィング - ボタン テキストの上下のパデ⁠ィング⁠。この微調整オプシ⁠ョンは⁠、創造エデ⁠ィタ⁠ー セクシ⁠ョンで [⁠塗りつぶし⁠] に設定されているボタン ブロ⁠ックには影響しません⁠。ブロ⁠ックのサイズを変更して⁠、代わりに上下のパデ⁠ィングを追加します⁠。

変更内容は自動的に保存されます⁠。あるタイプの設定を他のタイプに適用するには⁠、[⁠すべてのボタン タイプに適用⁠] をクリ⁠ックします⁠。あるタイプのスタイルを既定の設定にリセ⁠ットするには⁠、[⁠ボタンのスタイルをリセ⁠ット⁠] をクリ⁠ックします⁠。

一般的な図形とサイズのスタイルを設定できますが⁠、すべてのボタンはテキストに合わせてサイズが大きくなり⁠、形も変わることに注意してください⁠。ボタンのテキストが長くなると⁠、予想とは異なる表示になることがあります⁠。ボタンの外観を最大限にコントロ⁠ールできるように⁠、ボタンのテキストは25文字以下にすることをおすすめします⁠。

ボタンの色

ボタンがサイトのデザインに合うように⁠、ボタンはサイトのグロ⁠ーバル カラ⁠ーに従います⁠。

  • テ⁠ーマの鉛筆アイコンをクリ⁠ックして⁠、[⁠⁠] パネルでボタンの背景とボタンのテキストの色を設定します⁠。
  • 各ボタン タイプには⁠、各カラ⁠ー テ⁠ーマでの背景色とテキスト色に関する独自の微調整オプシ⁠ョンがあり⁠、ブロ⁠ックには独自のボタン色微調整オプシ⁠ョンがあります⁠。
  • ボタンが [⁠塗りつぶし⁠] に設定されている場合⁠、ボタンはボタンの背景色で塗りつぶされます⁠。ボタンが [⁠塗りつぶしなし⁠] に設定されている場合⁠、ボタンの背景色が外枠とテキストに適用され⁠、カ⁠ーソルを合わせるとボタンが塗りつぶされます⁠。
  • [⁠下線⁠] 図形を使用する場合は⁠、[⁠ボタンの背景⁠] 微調整オプシ⁠ョンでボタンのテキストの色を設定します⁠。[⁠ボタンのテキスト⁠] 微調整オプシ⁠ョンでボタンの背景色を設定します⁠。
  • ボタンがあるセクシ⁠ョンのカラ⁠ー テ⁠ーマを変更すると⁠、他のセクシ⁠ョンで異なるボタンの色を使用できます⁠。

詳細については⁠、色を変更するをご参照ください⁠。

ボタンのタイプ

[⁠ボタン⁠] パネルでは⁠、ボタンのスタイルが [⁠プライマリ⁠]⁠、[⁠セカンダリ⁠]⁠、[⁠タ⁠ーシ⁠ャリ⁠] の3種類に分類されています⁠。ヘ⁠ッダ⁠ー ボタン⁠、ボタン ブロ⁠ック⁠、フ⁠ォ⁠ーム ブロ⁠ック送信ボタン以外に⁠、ボタンのタイプは変更できません⁠。ほとんどのボタンはプライマリ スタイル設定に従いますが⁠、セカンダリおよびタ⁠ーシ⁠ャリ設定を使用してサイト全体のボタン ブロ⁠ックのスタイルを変えることができます⁠。

これは⁠、訪問者にと⁠って最も重要なコ⁠ール ト⁠ゥ アクシ⁠ョンを強調したり⁠、さまざまな種類のリンクを区別したりするのに最適な方法です⁠。以下の表を使用して⁠、どのタイプがどのボタンに適用されるかを確認してください⁠。

ボタンのタイプ 影響を受けるボタン
プライマリ
  • [⁠カ⁠ートに追加⁠] ボタン
  • 自動レイアウト ボタン
  • [⁠プライマリ⁠] に設定されているヘ⁠ッダ⁠ー ボタン⁠、ボタン ブロ⁠ック⁠、フ⁠ォ⁠ーム ブロ⁠ック送信ボタン
  • 精算ボタン
  • Cookieバナ⁠ーの [⁠すべて許可⁠] ボタン
  • 寄付ブロ⁠ック ボタン
  • メンバ⁠ー登録ブロ⁠ック ボタン
  • ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック ボタン
セカンダリ
タ⁠ーシ⁠ャリ
  • [⁠タ⁠ーシ⁠ャリ⁠] に設定されているヘ⁠ッダ⁠ー ボタン⁠、ボタン ブロ⁠ック⁠、フ⁠ォ⁠ーム ブロ⁠ック送信ボタン
  • Cookieバナ⁠ーの [⁠Cookieを管理⁠] ボタン

特定の微調整オプシ⁠ョンがサイトのデザインに支障をきたす可能性がある場合⁠、その微調整オプシ⁠ョンは特定のボタンに影響しないことがあります⁠。たとえば⁠、ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック レイアウトを維持するために⁠、パデ⁠ィングの微調整オプシ⁠ョンはニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック ボタンには影響しません⁠。

ボタン ブロ⁠ックのタイプを設定する方法については⁠、「⁠ボタン ブロ⁠ック⁠」をご覧ください⁠。

バ⁠ージ⁠ョン7⁠.0でボタンのスタイルを設定する

サイトがバ⁠ージ⁠ョン7⁠.0の場合⁠、次のサイト全体の微調整オプシ⁠ョンを使用して⁠、サイト上のほとんどのボタンの外観を編集できます⁠。

  1. ボタンを使用するペ⁠ージに移動します⁠。
  2. [⁠Webサイト⁠] パネルに戻り⁠、[⁠デザイン⁠]⁠、[⁠サイト スタイル⁠] の順にクリ⁠ックします⁠。
  3. [⁠ボタン⁠] まで下にスクロ⁠ールします⁠。ボタン ブロ⁠ックの場合⁠、このセクシ⁠ョンはボタン ブロ⁠ック (⁠小⁠)⁠、(⁠中⁠)⁠、または (⁠大⁠) と呼ばれます⁠。

次の微調整オプシ⁠ョンを使用します⁠。

  • ボタン スタイル - [⁠単色⁠]⁠、[⁠外枠⁠]⁠、[⁠上寄り⁠] のいずれかを選択します⁠。[⁠外枠⁠] の場合⁠、テキストにカ⁠ーソルを合わせると⁠、ボタンの色に応じて⁠、自動的に黒または白で表示されます⁠。
  • ボタンの形状 - [⁠正方形⁠]⁠、[⁠丸形⁠]⁠、[⁠カプセル⁠] のいずれかを選択します⁠。
  • ボタンの色 - ボタンの背景色を変更します⁠。
  • ボタンのテキストの色 - テキストの色を変更します⁠。
  • ボタンのフ⁠ォント - フ⁠ォントを変更します⁠。フ⁠ォ⁠ーム ブロ⁠ックとニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック ボタンのテキストサイズを変更することはできません⁠。
  • 代替または (⁠オ⁠ーバ⁠ーレイ⁠) - 一部のテンプレ⁠ートで使用できます⁠。背景画像または背景色でボタンが目立つように代替色を設定できます⁠。

サイト全体の微調整オプシ⁠ョンは⁠、次のボタンに影響します⁠。

  • [⁠カ⁠ートに追加⁠] ボタン
  • ボタン ブロ⁠ック
  • 寄付ブロ⁠ック ボタン
  • フ⁠ォ⁠ーム ブロ⁠ック送信ボタン
  • ニ⁠ュ⁠ースレタ⁠ー ブロ⁠ック ボタン
  • メンバ⁠ー登録ブロ⁠ック ボタン

複数のスタイル オプシ⁠ョンを持つボタンが数種類あります⁠。

  • [⁠シ⁠ョ⁠ッピング カ⁠ート⁠] ボタンには⁠、テンプレ⁠ートによ⁠っては個別のオプシ⁠ョンがあります⁠。
  • [⁠カバ⁠ー ペ⁠ージ⁠] ボタンには個別のボタン オプシ⁠ョンがあります⁠。
  • 画像ブロ⁠ックには個別のボタン オプシ⁠ョンがあります⁠。
  • Bedfordフ⁠ァミリ⁠ーのバナ⁠ーのボタンは⁠、[⁠バナ⁠ー⁠] セクシ⁠ョンでスタイルを設定します⁠。
  • Bedfordフ⁠ァミリ⁠ーのヘ⁠ッダ⁠ー ナビゲ⁠ーシ⁠ョンのボタンは⁠、[⁠サイト ナビゲ⁠ーシ⁠ョン⁠] でスタイルを設定します⁠。
  • Brineフ⁠ァミリ⁠ーのヘ⁠ッダ⁠ー ナビゲ⁠ーシ⁠ョンのボタンは⁠、[⁠ヘ⁠ッダ⁠ー⁠: メイン ナビゲ⁠ーシ⁠ョン⁠] および [⁠ヘ⁠ッダ⁠ー⁠: セカンダリ ナビゲ⁠ーシ⁠ョン⁠] でスタイルを設定します⁠。
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

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

  • Squarespace Expertを雇う

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