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

カスタムCSSを追加するには?

カスタムコードを使用して、標準のオプションを超えてウェブサイトの外観を細かく調整しましょう。

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

カスタムCSSを追加するには?

カスタムコードを使用して、標準のオプションを超えてウェブサイトの外観を細かく調整しましょう。

簡単な回答: ウェブサイト > ビルダー > サイト設定 > デザインタブに移動し、カスタムCSSを追加します。

カスタムCSSオプションの見つけ方

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

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

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

  4. 下にスクロールしてカスタムCSSテキストエリアを見つけます

  5. CSSコードを入力します

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

CSSでカスタマイズできる内容

  • フォントサイズとスタイル

  • 余白とマージン

  • 色と背景

  • ボタンの外観

  • セクションレイアウト

  • モバイル専用のスタイル

例:フォントサイズの変更

.section-title {
  font-size: 32px;
}

例:余白の調整

.content-section {
  padding: 40px 20px;
}

例:カスタムボタンカラー

.btn-primary {
  background-color: #d4a574;
  border-color: #d4a574;
}

カスタムCSSが適用される範囲

ここで追加したカスタムCSSは、結婚式のウェブサイトのみ(ウェブサイトエディタで作成するページとセクション)に適用されます。以下には適用されません:

  • 出欠回答フォーム

  • 情報収集フォーム

  • チェックインフォーム

  • アクセスコードページ

  • 準備中ページ

これらのページは独立した標準レイアウトを使用しており、ウェブサイトのカスタムCSSの影響を受けません。eカードのカスタムCSSも別となり、eカード自体にのみ適用されます。

重要な注意事項

  • CSSには専門的な知識が必要です

  • 変更はウェブサイト全体に影響します(ただし、上記のページには影響しません)

  • モバイルとデスクトップで十分にテストしてください

  • 無効なCSSはレイアウトを崩す可能性があります

  • 変更前に動作するCSSのバックアップを保存してください

問題が発生した場合

CSSが問題を引き起こした場合:
1. カスタムCSS設定に戻ります
2. 最近の変更を削除するかコメントアウトします
3. 保存してサイトを更新します
4. 変更を1つずつ追加し直します

ヒント

  • 小さな変更から始めましょう

  • ブラウザの開発者ツールを使用して要素名を見つけましょう

  • 複数のデバイスでテストしてください

  • コメントを付けてCSSを整理しましょう

  • 重要なレイアウトスタイルを上書きしないでください

関連記事

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