支払いボタンのスタイルを設定する

サイトに支払いボタンブロックを追加すると、ボタンの色やレイアウトなどを変更できます。このガイドでは、支払いボタンのスタイルを設定する方法について説明します。

支払いボタンの背景とテキストの色を変更するには、次の手順に従います。

1. 支払いブロックの個々のボタンをクリックします。
2. ブロック設定サイドバーの「背景とテキストの色」セクションを見つけます。
3. ボタン内のテキストの色を変更するには、「文字色」セクションをクリックします。
4. ボタンの色を変更するには、「背景」セクションをクリックします。

ボタンに色を適用する方法について、詳しくはこちらをご覧ください。

ボタンの半径を変更すると、ボタンの角の丸みを変更できます。次の手順を実行します。

1. 支払いブロックの個々のボタンをクリックします。
2. ブロック設定サイドバーの「枠線」セクションを見つけます。
3. スライダーを使用するか、数値を入力してボタンの半径を変更します。
4. 右上の「保存」または「公開」をクリックして変更を保存します。

数値を小さくするとボタンが角ばった形になり、大きくするとボタンの角が丸くなります。

ボタンの幅を設定するには、次の手順に従います。

1. 支払いブロックの個々のボタンをクリックします。
2. ブロック設定サイドバーの「幅設定」セクションを見つけます。
3. プリセット (25%、50%、75%、100%) のいずれかの値を選択するか、カスタム幅を設定します。
4. 右上の「保存」または「公開」をクリックして変更を保存します。

たとえば、ボタンの幅を100% に設定すると、全幅のボタンが作成されます。各ボタンを50% に設定すると、次の例のように、コンテンツエリアの全幅を占める2つのボタンが表示されます。

支払いボタンの配置を変更するには、次の手順に従います。

1. エディターの左上隅にある「リスト表示」を選択します。
2. リスト表示で「支払い」ボタンブロックをクリックします。
3. 表示されるブロックツールバーで、「項目の揃え位置を変更」 ボタンをクリックします。
4. 次のいずれかのオプションを選択します。
   • 左揃え: すべてのボタンを左に揃えます。
   • 中央揃え: すべてのボタンを中央に揃えます。
   • 右揃え: すべてのボタンを右に揃えます。
   • 項目の間隔: 「支払い」ブロックボタン内のボタンの間隔を均等に揃えます。
5. 右上の「保存」または「公開」をクリックして変更を保存します。

ボタンのプリセットスタイルを選択するには、次の手順に従います。

1. 支払いブロックの個々のボタンをクリックします。
2. ブロック設定サイドバーで、「スタイル」タブをクリックします。
3. ボタンのスタイルを「塗りつぶし」と「アウトライン」から選択します。
4. 右上の「保存」または「公開」をクリックして変更を保存します。

ボタン内のテキストのフォントサイズ、タイプ、大文字と小文字を変更するには、次の手順に従います。

1. 「支払い」ボタンブロックの個々のボタンをクリックします。
2. ブロック設定サイドバーで、「スタイル」タブをクリックします。
3. 「タイポグラフィ」セクションまでスクロールします。
4. ボタンのテキストのサイズを変更するか、3つのドット (⋮) をクリックして「フォント」と「大文字小文字」のオプションを有効にします。
5. 右上の「保存」または「公開」をクリックして変更を保存します。

タイポグラフィ設定の詳細については、こちらをご覧ください。

支払いボタンのテキストには太字や斜体などの書式を追加できます。書式設定を適用するには、次の手順に従います。

1. 支払いブロックの個々のボタンをクリックします。
2. ボタンのテキストの一部または全体を反転表示させます。
3. 表示されるブロックツールバーを使用して、次のスタイルを適用します。
   • 太字
   • 斜体
   • その他アイコンには以下があります。
     • ハイライト: テキストとそのテキスト部分だけの背景色を変更します。スタイルを使用してボタンの色を変更します。
     • インラインコード
     • インライン画像
     • キーボード入力スタイル
     • 言語属性
     • 打ち消し
     • 下付き
     • 上付き
4. 右上の「保存」または「公開」をクリックして変更を保存します。