外観とカスタマイズ
公開の Book a Time・出欠確認・日程調整ページはテーマのスナップショットを使います。プリセットを後から変えてもゲストには当時の見た目が届きます。主催者向け画面は標準のアプリ外観のままです。
デモ一覧 で実例を試せます。フローティングの切り替えでライト／ダークを変えられます。Free の各ファミリーは両方を定義しています。
Free プリセット
Harbor、Hearth、Atelier、Signal、Ink、Playground、Lantern などのファミリーから選びます。それぞれ次を定義します。
- ライトとダーク のプライマリ／背景／サーフェス／テキスト色
- フォント、角丸、ボタンスタイル
- 任意のカレンダー盤面色
ゲストはカラーモード設定に従います。正確な Free ファミリーは、ライト／ダークのペアへ自動で切り替わります。
Pro カスタマイズ
Pro ではプリセットを超えるブランディングが使えます。
| 設定 | 内容 |
|---|---|
| カスタム色 | ライト／ダークのサーフェスを個別に編集 |
| フォントと角丸 | Free と同じ許可リスト |
| ボタンスタイル | ゲストの主要操作に solid / soft / outline |
| カレンダー盤面 | カレンダー周辺の任意背景 |
| ロゴとブランド名 | 公開ヘッダーに表示 |
| 背景画像 | テーマ面の背後に全ページ背景 |
| カスタム CSS | #findmetime-page 配下にスコープ |
Free の公開表示では高度な項目がクランプされ、Free 向けの見た目だけがゲストに届きます。
カスタム CSS フック
Pro の CSS は書き換えられ、すべてのルールが #findmetime-page 配下にスコープされます。壊れやすいクラス名や data-testid ではなく、安定した data-fmt フックを使ってください。
よく使うフック:
| フック | 場所 |
|---|---|
data-fmt="page" | ページルート（#findmetime-page） |
data-fmt="branding" | ロゴ／ブランド名 |
data-fmt="title" | ページタイトル |
data-fmt="host-message" | ホストメッセージ |
data-fmt="form" | ゲストフォーム |
data-fmt="submit" | 送信ボタン |
data-fmt="calendar" | 予約カレンダー |
data-fmt="calendar-slot" | 個別の時間枠 |
data-fmt="rsvp-choice" | 出席／未定／欠席 |
data-fmt="poll-grid" | 日程調整の塗りグリッド |
例:
[data-fmt='title'] {
letter-spacing: -0.02em;
}
[data-fmt='host-message'] {
border-left: 3px solid var(--theme-primary);
padding-left: 0.75rem;
}
[data-fmt='submit'] button {
font-weight: 600;
}
ページルート上の便利な CSS 変数には --theme-primary、--theme-bg、--theme-surface、--theme-text、--theme-radius、--theme-font があります。
カスタム CSS 内の外部 url(https://…) は禁止です。ロゴと背景画像のフィールドを使ってください。