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

背景画像を編集する

壁紙のようにすべてのウェブサイトコンテンツの背後に表示される画像を追加またはカスタマイズします。

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

背景画像を編集する

壁紙のようにすべてのウェブサイトコンテンツの背後に表示される画像を追加またはカスタマイズします。

ウェブサイト全体(ヘッダーだけでなく)の背後に画像を追加したいですか?背景画像は、結婚式サイトのユニークで没入感のあるルックを作り出すことができます。

背景画像とは?

背景画像は、すべてのページコンテンツの背後に表示されます。ヘッダー画像(上部のみ)とは異なり、背景画像は以下の背後に表示されます:
- すべてのセクション
- すべてのテキスト
- ページ全体
- サイト全体

ウェブサイトの壁紙のようなものです。

背景画像とヘッダー画像

ヘッダー画像: ページの上部のみに表示

背景画像: サイト全体のあらゆる要素の背後に表示

これらは異なります!両方、どちらか一方、またはどちらも使わないことができます。

背景画像を使う理由

ユニークな美学。 サイトに独特のルックを作成します。

テクスチャと深み。 コンテンツを圧倒せずにビジュアルインタレストを追加します。

テーマに合わせる。 結婚式の雰囲気を強化します(ラスティック、エレガント、ビーチなど)。

控えめなブランディング。 非常に薄いパターンが個性を加えます。

背景画像を追加する手順

  1. ウェブサイト > ビルダーに移動します

  2. サイト設定をクリックします

  3. デザインタブを選択します

  4. 下にスクロールして背景画像をアップロードを見つけます

  5. 選択した画像をアップロードします

  6. 表示設定(サイズ、位置)を構成します

  7. 保存をクリックします

背景画像がコンテンツの背後に表示されます。

適切な画像を選ぶ

控えめさが鍵! コンテンツは背景の上で読める必要があります。

明るいまたはフェード。 フル強度の写真は気を散らしすぎます。

パターンが最適。 繰り返しテクスチャ、水彩、または控えめなデザイン。

低コントラスト。 全体に似たトーンで、テキストが一部のエリアで消えないように。

高解像度。 背景画像は広いスペースをカバーします。高品質ファイルを使用してください。

良い背景画像のアイデア

テクスチャード紙: リネン、水彩紙、古い羊皮紙

控えめなパターン: 繊細な花柄、幾何学模様、ドット

水彩ウォッシュ: ソフトでブレンドされた色

ファブリックテクスチャ: レース、麻布、シルク(撮影またはイラスト)

非常に薄い写真: 不透明度10%程度のエンゲージメント写真

ミニマルなイラスト: ラインドローイング、植物のスケッチ

悪い背景画像のアイデア

フルカラー写真: 忙しすぎて、テキストが読めなくなる

高コントラストパターン: 白黒のストライプやチェックは圧倒的

詳細な画像: 複雑なシーンがコンテンツから気を逸らす

暗い画像: 明るいテキストを読みにくくする

実際のコンテンツと競合するもの!

画像の表示設定

サイズ:
- カバー: ページ全体を埋める
- コンテイン: 画像全体を表示
- 全幅: ページ幅に調整

位置:
異なるデバイスで拡大縮小されるときに背景を取り付ける側を選択します。オプションには左上、上、右上、左、中央、右、左下、下、右下があります。

画像を背景に適したものにする

不透明度を減らす。 半透明にします(20〜30%の不透明度が良く機能します)

明るさを上げる。 暗い画像を明るくしてテキストが表示されるように

少しぼかす。 コンテンツからの気を散らすものを減らす

白いオーバーレイを追加。 画像の上に半透明の白いレイヤー

Photoshop、Canva、またはウェブサイトに組み込まれた設定などの写真編集ツールを使用してください。

読みやすさの確保

テキストをテストしてください! すべてのコンテンツが背景の上で読めるようにします。

コンテンツ背景色を使用。 実際のコンテンツを白または単色のボックスに配置して、テキストが常に読めるようにします。

高コントラスト。 暗いテキストには明るいエリアが背後に必要、明るいテキストには暗いエリアが必要。

モバイルで確認。 背景はスマートフォンで異なって見える場合があります。

背景画像の削除

見た目が気に入らない?

  1. 背景画像設定に移動します

  2. 削除または撤去オプションを見つけます

  3. 変更を保存します

サイトは単色の背景に戻ります。

背景色と背景画像

通常両方を設定できます:

背景色: 画像がすべてをカバーしない場合、または画像が読み込まれる間に表示

背景画像: 色の上に表示

シームレスなルックのために画像に合う背景色を選んでください。

ファイルサイズの考慮事項

背景画像は大きくなる可能性があり、サイトを遅くします!

画像を圧縮: TinyPNGなどのツールを使ってファイルサイズを減らす

サイズを最適化: 背景に5000px幅の画像は必要ありません

可能なら500KB未満を目指す

高速読み込みが重要です。

固定とスクロール背景

固定(パララックス): コンテンツがスクロールする間、背景は留まる(クールな効果!)

スクロール: 背景がページと一緒に動く(従来)

テーマがパララックス背景をサポートしているか確認してください。

サイト全体の背景

背景画像はウェブサイト全体に適用されます。すべてのページとセクションの背後に表示されます。

モバイルの考慮事項

背景画像はモバイルで表示されない場合があります 読み込み速度を向上させるため

または狭い画面で異なってトリミングされる場合があります

徹底的にテストしてテーマがスマートフォンで背景をどのように扱うか確認してください

背景画像をスキップするとき

サイトに写真が多い: 背景画像は実際の写真と競合する

コンテンツ重視のサイト: 多くのテキストにはクリーンで気を散らさない背景が必要

テーマがうまくサポートしない: 一部のテーマは背景画像用に設計されていません

高速読み込みが欲しい: 背景画像はファイルサイズを追加

シンプルがより良い: 時には単色がよりクリーンで優雅

テーマの互換性

すべてのテーマが背景画像とうまく機能するわけではありません!一部は単色用に設計されています。サイトをプレビューして、背景画像がデザインを強化するか散らかすかを確認してください。

パターンと写真

パターン: 通常より機能します!繰り返し、控えめ、気を散らさない

写真: 機能させるのが難しく、重いフェード/ぼかしが必要

迷ったらパターンにしましょう。

背景画像を入手する

自分で作成: Canvaには背景テンプレートがあります

無料リソース: Subtle Patterns、Unsplash(「texture」で検索)

デザインマーケットプレイス: Creative Market、Etsy

自分で作る: テクスチャ(紙、布など)を撮影して明るくする

背景画像はサイトに美しく控えめなタッチを加えることができますが、コンテンツを圧倒しないよう慎重な検討が必要です。

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