メインコンテンツにスキップ

セクションカラーを個別にカスタマイズする

個別のセクションでテーマのデフォルトカラーを上書きして、視覚的な多様性を作り出し、特定のコンテンツを強調できます。

対応者:Brian
今日アップデートされました

セクションカラーを個別にカスタマイズする

個別のセクションでテーマのデフォルトカラーを上書きして、視覚的な多様性を作り出し、特定のコンテンツを強調できます。

テーマにはデフォルトのカラーが付属していますが、セクションごとに上書きできます。これにより、特定のセクションを強調したり視覚的な多様性を作り出したりする柔軟性が大幅に向上します。

個別カラーでできること

特定のセクションのテーマカラーを上書きできます

視覚的な階層を作成できます。 重要なセクションを目立たせます。

サイト全体のテーマを変更せずにページに多様性を追加できます

特定のコンテンツを強調できます(出欠回答ボタンや重要な日付など)。

セクションのカラーをカスタマイズする

  1. メインナビゲーションのウェブサイトに移動します

  2. カスタマイズしたいセクションをクリックします

  3. カラーオプションを探します(通常は背景色テキストカラーなど)

  4. カラーピッカーをクリックします

  5. カスタムカラーを選択します

  6. 変更を保存をクリックします

利用可能なカラー設定

セクションタイプによって次のオプションが表示される場合があります。

背景色: セクションコンテンツの背景の色。

テキストカラー: セクション内のテキストの色。

ボタンカラー: ボタンのあるセクション用。

ボーダーカラー: 区切り線やボーダーのあるセクション用。

すべてのセクションにすべてのオプションがあるわけではありません。セクションタイプによります。

カラーピッカーのヒント

カラーホイールを使って任意の色を選択できます。

16進数コードを入力して正確な色を指定できます。

透明度を調整できます(テーマがサポートしている場合)。

進行しながらプレビューできます。通常、カラーはリアルタイムで更新されます。

カラーをカスタマイズするタイミング

CTAを目立たせる。 ゲストが見逃さないように出欠回答セクションに明るい背景色を付けます。

セクションを作成する。 背景色を交互に変えて、ページの異なる部分を視覚的に分けます。

結婚式のカラーに合わせる。 特定のセクションに実際の結婚式のパレットを使います。

重要な情報を強調する。 色付きの背景は目を引きます。

カラーを選ぶヒント

コントラストが重要です。 暗い背景なら明るいテキストを使用します。暗いテキストには明るい背景が必要です。そうでないと読みにくくなります。

やりすぎないでください。 すべてのセクションが異なる色だと混沌として見えます。2〜3色を選んでそれに固執しましょう。

読みやすさをテストしましょう。 一部のカラーの組み合わせはきれいに見えますが読みにくいです。他の人に確認してもらいましょう。

写真を考慮しましょう。 セクションに画像がある場合、背景色は画像の周りに表示されます(テーマによります)。

ブランドに沿って保ちましょう。 あなたと結婚式らしい色を使いましょう。

カラーをリセットする

セクションのカラーをカスタマイズしてテーマのデフォルトに戻したい場合は、セクションカラーをテーマデフォルトにリセットする記事をご覧ください。

カスタムカラーとテーマを組み合わせる

テーマは全体的なカラーパレットを設定しますが、個別のセクションカラーはそれを上書きします。これは次を意味します。

ほとんどのセクションはテーマカラーに従います。

カスタマイズされたセクションは選択したカラーを使用します。

テーマを変更してもカスタムカラーのセクションには影響しません。

これにより両方の良いところを得られます。

よくある用途

交互の背景。 白、薄いグレー、白、薄いグレーで心地よい視覚リズムを作ります。

アクセントセクション。 ニュートラルなページに1つの色のアクセント。

ブランドセクション。 出欠回答や重要な詳細に正確な結婚式のカラーを使用します。

シーズンの雰囲気。 秋の結婚式には暖色系、冬には寒色系など。

個別のカラーコントロールを使えば、ゼロから作り直すことなくサイトを完全にカスタムな感じにできます。

こちらの回答で解決しましたか?