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

ヘッダー背景を編集する

お二人の名前、ロゴ、ナビゲーションが表示されるヘッダーセクションの背後の色や画像をカスタマイズします。

ヘッダー背景を編集する

お二人の名前、ロゴ、ナビゲーションが表示されるヘッダーセクションの背後の色や画像をカスタマイズします。
​

ヘッダー背景は、サイトのヘッダーセクション(お二人の名前、ロゴ、ナビゲーションがある場所)の背後の色や画像です。カスタマイズすることで、ヘッダーを目立たせ、結婚式のスタイルに合わせることができます。
​

ヘッダー背景とは?

ヘッダー背景は、以下の要素の背後のエリアです:
- カップル名またはロゴ
- ナビゲーションメニュー
- その他のヘッダー要素
​

単色、グラデーション、画像、または透明にすることができます。
​

カスタマイズする理由

テーマに合わせる。 結婚式のカラーと調和させます。
​

コントラストを作成。 名前とナビゲーションを読みやすくします。
​

ビジュアルインタレストを追加。 控えめなパターンや色が個性を加えます。
​

ブランドの一貫性。 招待状や他の結婚式素材と合わせます。
​

ヘッダー背景を編集する手順

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

  2. 設定アイコンをクリックしてサイト設定を開きます

  3. 上部のヘッダータブをクリックします

  4. 下にスクロールしてヘッダー背景をアップロード(1280px幅)を見つけます

  5. 背景画像をアップロードします

  6. 表示モードを選択します:カバー、コンテイン、または全幅

  7. ヘッダー背景位置を設定して、デバイス間の配置を制御します

  8. 読みやすさを向上させるには、白いテキストで画像をオーバーレイをオプションでチェックします

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

ヘッダー背景が更新されます。
​

背景オプション

単色: 1色(最も一般的でクリーン)
​

グラデーション: 1色から別の色へのブレンド
​

画像: ヘッダーの背後の写真またはパターン
​

透明: 背景なし、背後のページが見える
​

背景色を選ぶ

白または明るい色: クラシック、クリーン、ほとんどのテキスト色と合う
​

暗い色: ドラマチック、モダン(明るい色のテキストを使用)
​

結婚式のカラー: 実際の結婚式のパレットに合わせる
​

テーマデフォルト: テーマが提供するものに従う(多くの場合、安全な選択)
​

背景画像を使う

ヘッダーの背後に画像が欲しいですか?
​

控えめなパターンが最適: テクスチャ、水彩、ソフトな花柄
​

低コントラスト: テキストが読めるように
​

繰り返しパターン: 目に見える継ぎ目なくタイル状になる
​

ぼかした写真: ソフトフォーカスの写真は背景として機能します
​

注意: 忙しすぎるとテキストが読めなくなります。
​

読みやすさの確保

最も重要なこと:ゲストはヘッダーテキストを読めなければなりません!
​

明るい背景 = 暗いテキスト
​

暗い背景 = 明るいテキスト
​

忙しい背景 = 半透明オーバーレイを追加してコントラストを改善
​

異なるデバイスで読みやすさをテストしてください。
​

透明度とオーバーレイ

一部のテーマでは以下が可能です:
​

ヘッダーを透明にする: 背後のページコンテンツを表示
​

カラーオーバーレイを追加: 背景画像の上に半透明の色を配置
​

不透明度を調整: 背景の透明度を制御
​

これらは洗練されたレイヤー化されたルックを作成します。
​

モバイルの考慮事項

ヘッダー背景はモバイルで異なって見える場合があります:
​

色: 通常同じように表示されます
​

画像: 異なってトリミングまたは拡大縮小される場合があります
​

透明ヘッダー: 読みやすさのためにモバイルでは単色に切り替わる場合があります
​

常にスマートフォンでテストしてください。
​

背景選択のヒント

シンプルに保つ。 クリーンな背景はより専門的に見えます。
​

ナビゲーションを考慮する。 メニューリンクは背景に対して読めなければなりません。
​

雰囲気に合わせる。 フォーマルな結婚式?エレガントでミニマルに。カジュアル?色で楽しみましょう。
​

組み合わせをテスト。 異なるテキスト色で背景を試して、何が機能するか確認します。
​

テーマと戦わない。 テーマのスタイルに逆らうのではなく、協力して作業します。
​

よくある組み合わせ

白い背景 + 黒いテキスト: クラシック、常に読みやすい
​

ネイビー背景 + 白いテキスト: エレガントで洗練された
​

ブラッシュピンク背景 + ダークグレーテキスト: ロマンチックでソフト
​

透明背景 + 白いテキスト(暗いヒーロー画像上): モダンでスリック
​

クリーム背景 + ブラウンテキスト: ラスティック、ビンテージの雰囲気
​

背景の更新

いつでも変更できます。例えば:
​

ニュートラルから始めて、 結婚式が近づくにつれて色を加える
​

季節に合わせる(春夏は明るくエアリー、秋冬はより豊かな色合い)
​

追加する新しい写真と調和させる
​

ヘッダー背景とページ背景

ヘッダー背景: 上部のヘッダーエリアのみ
​

ページ背景: すべてのコンテンツの背後のページ全体
​

これらは別々です!白いページに色付きヘッダー、またはその逆が可能です。
​

背景画像の削除

画像背景を追加したが単色に戻したい場合:
​

  1. サイト設定 → ヘッダータブに移動します

  2. 背景画像プレビューの上にある削除をクリックします

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

固定とスクロールヘッダー背景

一部のテーマは以下を提供します:
​

固定ヘッダー: スクロールしても上部に留まる(スティッキー)
​

スクロールヘッダー: ページと一緒にスクロールする
​

背景の動作は通常ヘッダーの動作と一致します。
​

アクセシビリティ

高コントラストが重要。 視覚障害のあるゲストもいるかもしれません。テキストがはっきり見えるようにしてください。
​

グレースケールでテスト。 サイトを白黒に変換して、コントラストが十分か確認します。
​

赤/緑の組み合わせを避ける。 色覚異常のゲストには難しいです。
​

インスピレーションを得る

以下を見てみましょう:
​

結婚式の招待状: カラースキームに合わせる
​

他の結婚式ウェブサイト: 好きなものを見つける
​

会場: 会場の美学から色を引き出す
​

テーマのデモ: テーマデザイナーの意図を見る
​

シンプルに保つべきとき

ヘッダー画像が忙しい: シンプルな背景で輝かせる
​

ナビゲーションリンクが多い: 視覚的競争が多すぎるとゲストを混乱させる
​

ミニマリストテーマ: シンプルな背景はミニマリストスタイルに合う
​

どうしたらいいか分からない: 白またはテーマのデフォルトが常に安全
​

ヘッダー背景はサイト全体のトーンを設定します。読みやすく、美しく保ちましょう。
​

関連記事

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