ボタン&見出しピルの設定
グローバルスタイリングでのボタン設定
サイト内のボタンのデザインを「プリセット」として登録しておくと、ボタンウィジェットで何度でも使い回せます。
色や形を毎回設定し直す必要がなく、サイト全体のボタンのデザインをそろえられます。
※共通スタイリングの設定は、すべてのページに反映されます。
設定画面の開き方
- ページの編集画面で、左側のメニューにある筆のアイコンをクリックします。
- 「共通スタイリング」のメニューから「ボタン」をクリックします。
【画像：筆アイコン・ボタンメニューに赤枠、設定パネル】
① プリセットを選ぶ・作る
プリセット
編集したいボタンのスタイルをプルダウンから選びます。最初は「デフォルト」が設定されています。
新しいプリセットを作る場合
- 「新しいプリセット名」に名前を入力します（例：申し込みボタン、サブボタン）。
- 「新しいプリセットを作成」をクリックします。
- Rename Preset：選んでいるプリセットの名前を変更します。
- プリセットを削除：選んでいるプリセットを削除します。
用途ごとにプリセットを分けておくと便利です。
（例：目立たせたい申し込みボタンと、控えめな「詳しく見る」ボタン）
② デザインを設定する
設定した内容は、パネル上部の「ボタンをプレビュー」で確認しながら調整できます。プレビュー右下のアイコンで、パソコンとスマホの表示を切り替えられます。
色
- ボタンの色：ボタンの背景の色
- 枠線の色：ボタンのふちの色
- グラデーションを追加：チェックを入れると、背景をグラデーションにできます
文字と影
- テキストスタイル：「変更する」から、ボタンの文字のフォントや大きさ、色を設定します
- 影：「変更する」から、ボタンに影を付けられます
大きさと形
- パディングサイズ：文字のまわりの余白。大きくするほどボタンが大きくなります
- 枠線の角丸：角の丸み。0pxだと四角、数字を大きくするほど丸くなります
- 枠線の太さ：ふちの線の太さ。0pxだと線はありません
- 全幅にボタンを拡大：チェックを入れると、ボタンが横幅いっぱいに広がります
配置
- ボタンの配置：左寄せ・中央・右寄せから選びます【要確認：選択肢の表記】
マウスを乗せたときの動き（ホバー効果）
- ホバー効果：マウスを乗せたときの動きを選びます（例：右側に色をスライド）
- ホバー色：マウスを乗せたときのボタンの色
- ホバーテキストの色：マウスを乗せたときの文字の色
③ 保存する
- パネル下の「確認」をクリックします。
グローバルスタイリングでの見出しピルの設定
見出しピルは、見出しの上などに置く、丸みのある小さなラベルです（例：「上部見出し」「STEP1」「お客様の声」など）。
デザインを「プリセット」として登録しておくと、見出しピルウィジェットで何度でも使い回せます。サイト全体でラベルのデザインをそろえられます。
※共通スタイリングの設定は、すべてのページに反映されます。
設定画面の開き方
- ページの編集画面で、左側のメニューにある筆のアイコンをクリックします。
- 「共通スタイリング」のメニューから「見出しピル」をクリックします。
【画像：筆アイコン・見出しピルメニューに赤枠、設定パネル】
① プリセットを選ぶ・作る
プリセット
編集したいスタイルをプルダウンから選びます。最初は「デフォルト」が設定されています。
新しいプリセットを作る場合
- 「新しいプリセット名」に名前を入力します（例：セクション見出し、キャンペーン用）。
- 「新しいプリセットを作成」をクリックします。
- Rename Preset：選んでいるプリセットの名前を変更します。
- プリセットを削除：選んでいるプリセットを削除します。
② デザインを設定する
設定した内容は、パネル上部のプレビューで確認しながら調整できます。プレビュー右下のアイコンで、パソコンとスマホの表示を切り替えられます。
スタイル
- ピルの見た目の種類を選びます（例：ソリッドカラー＝背景を塗りつぶすタイプ）
【要確認：ほかの選択肢（枠線のみ など）があれば追記】
色
- 背景 / 枠線：ピルの背景と、ふちの色
- テキスト：ピルの中の文字の色
文字
- フォントファミリー：文字のフォント。「デフォルト」はサイト全体のフォント設定が使われます【要確認】
- フォントサイズ：文字の大きさ
形と大きさ
- 枠線の角丸：角の丸み。数字を大きくするほど丸くなり、ピル（カプセル）型になります
- パディングサイズ：文字のまわりの余白。大きくするほどピルが大きくなります
③ 保存する
- パネル下の「確認」をクリックします。
- 画面右上の「保存」をクリックして完了です。
基本設定一覧
決済設定
Stripeの「セキュリティ・チェックリストに基づく対策措置状況申告書」について
ドメイン&メールアドレス設定
グローバルスタイリング設定
その他
フリー画像素材の活用（ファイルマネージャーとUnsplashが完全統合）
llms.txtの設定方法（AIにサイトを正しく紹介してもらうために）
更新日 04/10/2026
ありがとうございます