ボタンをデザインする

色、フォント、枠線、影などを調整して、サイトのボタンをカスタマイズできます。このガイドでは、使用可能なスタイル設定オプションとその適用方法について説明します。

ボタンのスタイルをカスタマイズするには、次の手順に従います。

1. リストビューを使用して、「ボタン」ブロックを選択します。

2. 右側サイドバーの「ブロック」設定で、スタイルアイコンをクリックします。

3. 「ボタン」ブロックの次のスタイルをカスタマイズします。
   • 色: 「ボタン」ブロックの背景色を選択します。色について詳しくご確認ください。
   • タイポグラフィ: ボタンのフォントの種類とサイズを変更します。タイポグラフィについて詳しくご確認ください。
   • サイズ: パディング、マージン、ブロック間隔を設定します。サイズについて詳しくご確認ください。
   • 枠線: 枠線の色と角丸をカスタマイズします。枠線について詳しくご確認ください。

「ボタン」ブロック内の個々のボタンにスタイルを適用するには、次の手順に従います。

1. リストビューを使用して、「ボタン」ブロック内の個々のボタンを選択します。

2. 右側サイドバーの「ブロック」設定で、スタイルアイコンをクリックします。

3. 次のスタイルをカスタマイズします。
   • スタイル: ボタンのスタイルを塗りつぶしとアウトラインから選択します。
   • 色: ボタンのテキストと背景の色を選択します。色について詳しくご確認ください。
   • タイポグラフィ: ボタンのフォントの種類、スタイル、サイズを変更します。タイポグラフィについて詳しくご確認ください。
   • サイズ: 個々のボタンの周囲のパディングを設定します。サイズについて詳しくご確認ください。
   • 境界線と影: 枠線の色と角丸をカスタマイズしたり、ボタンに影を付けたりします。枠線について詳しくご確認ください。

ブロックのスタイルで利用できるタイポグラフィオプションに加えて、次の手順に従ってボタンのテキストに書式設定を適用できます。

1. リストビューを使用して、「ボタン」ブロック内の個々のボタンを選択します。
2. 書式を設定するボタンのテキストの一部または全体を強調表示します。 

3. 次の書式設定オプションから選択します。
   • テキストの配置 (左寄せ、中央寄せ、右寄せ)
   • リンクを追加
   • 太字
   • イタリック
   • 続きアイコンには以下があります。
     • ハイライト: テキストとそのテキストの背景色を変更します。スタイルを使用してボタンの色を変更します。
     • インラインコード
     • インライン画像
     • キーボード入力スタイル
     • 言語属性
     • 打ち消し
     • 下付き
     • 上付き