簡易デザインモード、ヘッダーオーバーレイ、カスタムCSSなどの高度な機能を使って、デザインを完全に制御する方法をご紹介します。

ウェブサイトの外観をもっとコントロールしたいですか？WedSitesは、パワーユーザー向けに簡易デザインモード、ヘッダーオーバーレイ効果、カスタムCSSなどの高度なデザインオプションを提供しています。

簡易デザイン： デフォルトの背景テクスチャを削除して、よりクリーンな見た目に。

白いテキストで画像をオーバーレイ： テキスト色を白に変更し、ヘッダー背景画像の上に重ねて読みやすさを改善。

カスタムCSS： 独自のCSSコードを追加して、完全なデザイン制御を実現。

これらのオプションはすべてサイト設定 → デザインタブにあります。

各オプションはデザインタブの異なるセクションにあります。

テーマから背景テクスチャを削除して、よりクリーンでミニマルな見た目にします。

動作：
- デフォルトの背景テクスチャを非表示
- テーマの簡略化バージョンを作成
- サイトをよりモダンでクリーンに感じさせる
- 全体的なテンプレート背景パターンに影響

有効にする方法：
1. サイト設定 → デザインタブに移動します
2. 簡易デザインセクションを見つけます（上部、テーマプレビューの下）
3. トグルをオンにします
4. 下部の変更を保存をクリックします

使うとき：
- ミニマルでモダンなルックが欲しい
- テーマに忙しい背景テクスチャがある
- 装飾的なものよりクリーンなデザインを好む
- 写真が主役で競合するパターンが欲しくない

スキップするとき：
- テーマのテクスチャが気に入っている
- 結婚式のスタイルがロマンチックまたはビンテージ（テクスチャが個性を加える）
- デフォルトデザインがすでにクリーン

この設定は、テーマに背景テクスチャが含まれている場合のみ機能します。一部のテーマでは違いが表示されません。

ヘッダーテキスト色を白に変更し、ヘッダー背景画像の上に重ねて、暗いまたは忙しい画像に対してテキストを読みやすくします。

動作：
- ヘッダーテキスト色を白に変更
- ヘッダー背景画像に白いテキストを重ねる
- 忙しい画像に対してテキストを際立たせる
- 名前とヘッダーコンテンツの読みやすさを改善
- ヘッダーエリアのみに影響（サイト全体ではない）

有効にする方法：
1. サイト設定 → デザインタブに移動します
2. ヘッダーセクションまでスクロールします
3. ヘッダー背景画像がアップロードされていることを確認します（オーバーレイする対象がないため）
4. 白いテキストで画像をオーバーレイというラベルのチェックボックスを見つけます
5. ボックスをチェックします
6. 下部の変更を保存をクリックします

使うとき：
- ヘッダー背景が暗いまたは忙しい
- ヘッダー画像上のテキストが読みにくい
- よりソフトでエレガントなヘッダーが欲しい
- 写真にテキストと競合する詳細が多い

スキップするとき：
- ヘッダー背景がすでに明るい
- 大胆でドラマチックなヘッダーが欲しい
- ヘッダー背景画像がない
- テキストがすでに読みやすい

注意： これはヘッダー背景画像をアップロードしている場合のみ表示されます。画像がない場合、オーバーレイオプションもありません！

CSSを知っている上級ユーザー向けに、独自のカスタムスタイルを追加してサイトを完全にパーソナライズできます。

内容：
- CSSコードを書けるテキストエリア
- スタイリングの完全な制御
- テーマのデフォルトを上書き
- 結婚式ウェブサイト全体に適用

カスタムCSSを追加する方法：
1. サイト設定 → デザインタブに移動します
2. 下までスクロールします（ヘッダーセクションの下）
3. カスタムCSSを追加リンクをクリックします
4. カスタムCSSテキストエリアが表示されます
5. CSSコードを入力または貼り付けます
6. 下部の変更を保存をクリックします

カスタムCSSがアクティブになります。

カスタムCSSを削除する方法：
1. サイト設定 → デザインタブに移動します
2. カスタムCSSセクションまでスクロールします（CSSを追加したので表示されているはずです）
3. カスタムCSSを削除リンクをクリックします
4. テキストエリアが消え、カスタムCSSが削除されます
5. 変更を保存をクリックします

サイトがデフォルトのテーマスタイルに戻ります。

CSSエディターの機能：
- 読みやすさのためのシンタックスハイライト
- 行番号
- 自動インデント
- すべての標準CSSをサポート

カスタムCSSを使うべき人：
- ウェブ開発者またはデザイナー
- コードに慣れている人
- 組み込みオプションではカバーされない特定のデザインニーズを持つユーザー
- 既存のブランディングを正確に合わせたい人

カスタムCSSをスキップすべき人：
- CSSに慣れていないユーザー
- 基本的なカスタマイズだけが欲しい人（代わりに色とフォントツールを使用）
- サイトを壊すことを心配している人

カスタムCSSの使用例：
- 特定のセクションのフォントサイズを変更
- 間隔とマージンを調整
- 特定の要素を非表示または表示
- カスタムアニメーションを追加
- 特定の場所でテーマカラーを上書き
- 設定で公開されていない要素をスタイリング

特定の要素をターゲット：
クラスとIDを使って変更したいものだけをターゲットします。サイトを調査して正しいセレクタを見つけましょう。

徹底的にテスト：
カスタムCSSは注意しないとデザインを壊す可能性があります。保存後は必ずライブサイトを表示してすべてが良く見えることを確認してください。

小さく始める：
一度に1つの変更を行いテストします。数百行を一度に貼り付けないでください。

コメントを使う：
各セクションが何をするか覚えておくためにCSSコメントを追加：
​ css
/* モバイルで見出しを大きくする */
h1 { font-size: 32px; }
​

モバイルフレンドリー：
モバイルデバイスでのテストを忘れないでください。必要に応じてメディアクエリを使用：
​ css
@media (max-width: 768px) {
/* モバイルスタイルをここに */
}
​

!importantを削除しないでください：
テーマスタイルを上書きする必要がある場合、!importantが必要な場合があります：
​ css
.heading { color: red !important; }
​

複数の高度なオプションを一緒に使用できます：

ニーズに基づいて組み合わせてください。

高度なデザインオプションを使用した後：

ゲストと共有する前に必ずテストしてください。

サイトが壊れて見える：
カスタムCSSを削除して最初からやり直してください。おそらく構文エラーまたは競合するルールがあります。

変更が表示されない：
​ 変更を保存をクリックしたことを確認してください。また、ブラウザをハードリフレッシュ（MacではCmd+Shift+R、WindowsではCtrl+Shift+R）してみてください。

テキストが見えない：
カラー値を確認してください。テキストを背景と同じ色に設定している可能性があります。

モバイルで奇妙に見える：
小さな画面用にスタイルを調整するためにメディアクエリを追加してください。

まだ行き詰まっている：
カスタムCSSを削除して、代わりに組み込みの色とフォントツールを使用してください。それらはテーマと完璧に機能するように設計されています。

高度な変更を加えて、最初からやり直したい場合：

テーマのデフォルトの外観に戻ります。

組み込みツール（色、フォント、ヘッダー設定）を使う：
- 素早く簡単な変更が欲しい
- 開発者ではない
- 保証された互換性が欲しい
- 何かを壊すことを心配している

カスタムCSSを使う：
- 非常に特定の何かが必要
- コードに慣れている
- 組み込みオプションでニーズをカバーできない
- 既存のブランディングを複製している

WedSitesサポートはカスタムCSSのデバッグを支援できません（ユーザー生成コードのため）が、以下のことができます：

これらの高度な設定は後でいつでも調整できます：

サイトはニーズの変化に合わせて進化できます。

高度なデザインオプションは、簡易テーマからフルCSSカスタマイズまで、結婚式ウェブサイトの外観の完全な制御を提供します。