この手順は完了です:公開サイト全体の色、フォント、ボタンの角丸を変更しました。
これはバックエンドの明暗設定ではありません(それはトップバーの「バックエンドスタイル」または 基本設定のバックエンドの既定外観 です)。
バックエンドのパス:ウェブサイト → ウェブサイトスタイル(/admin/settings/appearance)。デフォルトでは所有者のみがアクセスできます。フッターの 設定を保存 で書き込まれます;キャンバス上の変更はほとんどがプレビューです(短い遅延で自動適用されます)、リフレッシュすると前回保存した外観に戻ります。
「ヘッダーとフッター」との違いは何ですか?
| 設定 | 管理内容 |
|---|---|
| ウェブサイトスタイル(このページ) | ペイント:色、フォント、角丸、密度、影 |
| ヘッダーとフッター | 入口の配置:コンポーネント、メニュー。詳細は ヘッダーとフッターの概要 をご覧ください |
1. 色の組み合わせ
ブロックタイトル 色の組み合わせ。1セットのプリセットを選ぶと、5色が一度に適用されます:ブランドの主色、補助色、ページの背景、主要な文字、強調色。
既定の組み合わせ名の例:シンプルグレー、クリアブルーグレー、暖かい紙の米、サンゴの墨白、ミントの清新、ローズグレー粉、霧の青紙白です。
カスタムカラーを選択した後、色のブロックをクリックしてカラーパレットを開くか、#RRGGBBを入力できます。空白の場合はテーマパッケージ/既定を使用します。
既定のカラーチップのページ背景は白色です;色は補助色/強調色に偏ります。暗い背景が必要な場合は、カスタムカラーで自分で背景を調整してください(そして文字のコントラストが十分であることを確認してください)。
ブランドの主色と強調色はそれぞれどこに使いますか?
| 色 | 公開サイトでの使用 |
|---|---|
| ブランド主色 | ボタン、リンク、チェックマークなどクリック可能な場所 |
| 強調色 | 装飾用のポイント:ブロックタイトル上の小見出し(一般的なブロック;写真の上に重ねるときは、そのブロックの明るい/暗い文字に合わせて変更し、見やすくします)、価格プランの推奨ラベルとプラン名、データとカウントダウンの数字、ステップ番号とタイムラインのノード、引用の左側の線、特徴カードなどのアイコンボックス |
強調色が設定されていない場合、これらの場所はブランドの主色と同じ色になります。強調色は小さな文字に使用されますので、白い背景で見やすい濃い色を選んでください;ロゴに使う薄い色(例えば薄い青、薄い黄)は補助色に置くのが適しています。
暖かい紙の米とミントの清新の強調色は調整されて深くなり、小さな文字が見やすくなりました。以前にこれらの2つの組み合わせを適用したウェブサイトは自動的に色が変更されません;新しい強調色に変更したい場合は、もう一度そのカラーパレットをクリックしてください(他の4色も一緒に戻ります)、またはカスタムカラーで強調色だけを変更してください:暖かい紙の米 #b45309、ミントの清新 #047857です。
トップバーでもカラーパターンを素早く切り替えることができます(フォームとは完全に双方向で同期していません);それでも設定を保存することが基準です。
2. フォントの組み合わせ
フォントの組み合わせ ドロップダウン;「(組み合わせを使用しない)」を選択できます。
詳細設定で カスタムフォントスタック を展開し、タイトル/本文フォントをそれぞれ入力します。
3. ボタンの外観
ボタンの外観:角張った/適度な/丸みを帯びた/カプセル感、または カスタム値 を入力して ボタンの角丸(px) を設定します。
4. 外観と質感/クイック適用
クイック適用 で密度、影、トランジション、ホバーを一度に調整します:シンプルフラット、柔らかい標準、強調されたレイヤー、または カスタム組み合わせ で詳細を展開します。
| 詳細項目 | 選択肢の概念 |
|---|---|
| ブロック密度 | コンパクト/快適/ゆったり |
| カードの影 | なし/柔らかい/重い影 |
| ページのトランジション | 実際にページを切り替えないと見えません |
| ホバー強度 | マウスをメッセージ/価格カードなどに移動させたとき |
| 入場アニメーション | 主にデスクトップ幅でスクロールして入るとき;モバイルとエディタのiframe同ページプレビューでは必ずしも再生されません |
どうやって確認しますか
- 保存後に痕跡を残さず公開サイトを開きます。ボタンの色はブランドの主色と一致しています;小見出しや価格推薦ラベルなどは強調色と一致しています。
- スマートフォンとデスクトップでそれぞれ一度比較します(文字がまだ明確かどうか、特に強調色の小見出しについて)。
- ページの上部のロゴが新しい背景色に合っているか確認します;合わない場合は ロゴ を変更してください。
よくある問題
| 状況 | どうする |
|---|---|
| 更新して戻った | ただのプレビューで、まだ 設定を保存 を押していません。 |
| 編集者が入れない | 所有者に変更してもらってください。 |
| 濃い背景に文字が見えない | カスタムカラーを設定する際に 主要文字 と ページ背景 も一緒に調整してください。 |
| 小見出しの色が薄すぎる | 小見出しには 強調色 が使われているので、もう少し濃い強調色に変更してください。 |
| 特定のボタンを別の色にしたい | ファーストスクリーンとCTAバナーの副ボタンは個別に色を変更できます。詳細は 全画面ページエディタ を参照してください。 |