メールテンプレートビルダー

<!-- プリセット -->
<div class="et-section">
  <div class="et-section-title">プリセットテンプレート</div>
  <div class="et-presets">
    <button class="et-preset-btn" onclick="etApplyPreset('newsletter')">ニュースレター</button>
    <button class="et-preset-btn" onclick="etApplyPreset('announcement')">お知らせ</button>
    <button class="et-preset-btn" onclick="etApplyPreset('welcome')">ウェルカム</button>
    <button class="et-preset-btn" onclick="etApplyPreset('receipt')">注文確認</button>
  </div>
</div>

<!-- ヘッダー -->
<div class="et-section">
  <div class="et-section-title">ヘッダー</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-logo" checked onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-logo">ロゴを表示</label>
  </div>
  <div class="et-field" id="et-logo-field">
    <label>ロゴ URL</label>
    <input type="url" id="et-logo-url" placeholder="https://example.com/logo.png" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>ロゴ alt テキスト</label>
    <input type="text" id="et-logo-alt" value="会社ロゴ" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>ヘッダー背景色</label>
    <div class="et-color-row">
      <input type="color" id="et-header-bg-pick" value="#6366f1" oninput="etSyncColor('header-bg')">
      <input type="text" id="et-header-bg" value="#6366f1" oninput="etSyncPick('header-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>ヘッダーテキスト（ロゴなし時）</label>
    <input type="text" id="et-header-text" value="あなたの会社名" oninput="etUpdate()">
  </div>
</div>

<!-- ヒーロー画像 -->
<div class="et-section">
  <div class="et-section-title">ヒーロー画像</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-hero" onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-hero">ヒーロー画像を表示</label>
  </div>
  <div class="et-field">
    <label>画像 URL</label>
    <input type="url" id="et-hero-url" placeholder="https://example.com/hero.jpg" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>画像 alt テキスト</label>
    <input type="text" id="et-hero-alt" value="ヒーロー画像" oninput="etUpdate()">
  </div>
</div>

<!-- コンテンツ -->
<div class="et-section">
  <div class="et-section-title">コンテンツ</div>
  <div class="et-field">
    <label>見出し</label>
    <input type="text" id="et-heading" value="ニュースレターへようこそ" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>本文テキスト</label>
    <textarea id="et-body" oninput="etUpdate()">ご登録いただきありがとうございます！最新情報やお役立ちコンテンツをお届けします。今後ともよろしくお願いいたします。</textarea>
  </div>
</div>

<!-- CTAボタン -->
<div class="et-section">
  <div class="et-section-title">CTAボタン</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-cta" checked onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-cta">ボタンを表示</label>
  </div>
  <div class="et-field">
    <label>ボタンテキスト</label>
    <input type="text" id="et-cta-text" value="詳しく見る" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>ボタンリンク URL</label>
    <input type="url" id="et-cta-url" value="https://example.com" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>ボタン背景色</label>
    <div class="et-color-row">
      <input type="color" id="et-btn-bg-pick" value="#6366f1" oninput="etSyncColor('btn-bg')">
      <input type="text" id="et-btn-bg" value="#6366f1" oninput="etSyncPick('btn-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>ボタン文字色</label>
    <div class="et-color-row">
      <input type="color" id="et-btn-color-pick" value="#ffffff" oninput="etSyncColor('btn-color')">
      <input type="text" id="et-btn-color" value="#ffffff" oninput="etSyncPick('btn-color');etUpdate()">
    </div>
  </div>
</div>

<!-- スタイル -->
<div class="et-section">
  <div class="et-section-title">スタイル設定</div>
  <div class="et-field">
    <label>フォント</label>
    <select id="et-font" onchange="etUpdate()">
      <option value="Arial, Helvetica, sans-serif">Arial（推奨）</option>
      <option value="'Georgia', Times, serif">Georgia（セリフ）</option>
      <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
      <option value="Verdana, Geneva, sans-serif">Verdana</option>
      <option value="'Courier New', Courier, monospace">Courier New（等幅）</option>
    </select>
  </div>
  <div class="et-field">
    <label>メール背景色</label>
    <div class="et-color-row">
      <input type="color" id="et-body-bg-pick" value="#f4f4f5" oninput="etSyncColor('body-bg')">
      <input type="text" id="et-body-bg" value="#f4f4f5" oninput="etSyncPick('body-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>カード背景色</label>
    <div class="et-color-row">
      <input type="color" id="et-card-bg-pick" value="#ffffff" oninput="etSyncColor('card-bg')">
      <input type="text" id="et-card-bg" value="#ffffff" oninput="etSyncPick('card-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>文字色</label>
    <div class="et-color-row">
      <input type="color" id="et-text-color-pick" value="#374151" oninput="etSyncColor('text-color')">
      <input type="text" id="et-text-color" value="#374151" oninput="etSyncPick('text-color');etUpdate()">
    </div>
  </div>
</div>

<!-- フッター -->
<div class="et-section">
  <div class="et-section-title">フッター</div>
  <div class="et-field">
    <label>フッターテキスト</label>
    <textarea id="et-footer" oninput="etUpdate()">© 2025 あなたの会社名. All rights reserved.

〒000-0000 東京都○○区○○町1-2-3 配信停止 | プライバシーポリシー