プレースホルダー画像生成ツール - カスタムサイズ＆カラー

設定

<div class="pg-field">
  <label>サイズ（px）</label>
  <div class="pg-size-row">
    <input type="number" id="pg-width" value="300" min="1" max="4000" />
    <span class="pg-size-sep">×</span>
    <input type="number" id="pg-height" value="250" min="1" max="4000" />
  </div>
</div>

<div class="pg-field">
  <div class="pg-presets-label">プリセット</div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">よく使うサイズ</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="150" data-h="150">150×150</button>
      <button class="pg-preset-btn" data-w="300" data-h="250">300×250</button>
      <button class="pg-preset-btn" data-w="400" data-h="300">400×300</button>
      <button class="pg-preset-btn" data-w="800" data-h="600">800×600</button>
      <button class="pg-preset-btn" data-w="1200" data-h="630">1200×630</button>
      <button class="pg-preset-btn" data-w="1920" data-h="1080">1920×1080</button>
    </div>
  </div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">SNS</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="820" data-h="312">FBカバー</button>
      <button class="pg-preset-btn" data-w="1500" data-h="500">Xヘッダー</button>
      <button class="pg-preset-btn" data-w="1080" data-h="1080">Instagram投稿</button>
      <button class="pg-preset-btn" data-w="1080" data-h="1920">Instagramストーリー</button>
      <button class="pg-preset-btn" data-w="1200" data-h="627">LinkedIn投稿</button>
      <button class="pg-preset-btn" data-w="1280" data-h="720">YouTubeサムネイル</button>
    </div>
  </div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">広告バナー</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="728" data-h="90">リーダーボード</button>
      <button class="pg-preset-btn" data-w="300" data-h="600">ハーフページ</button>
      <button class="pg-preset-btn" data-w="160" data-h="600">スカイスクレイパー</button>
      <button class="pg-preset-btn" data-w="320" data-h="50">モバイルバナー</button>
      <button class="pg-preset-btn" data-w="468" data-h="60">フルバナー</button>
    </div>
  </div>
</div>

<div class="pg-field">
  <label>背景色</label>
  <div class="pg-color-row">
    <input type="color" id="pg-bg-picker" value="#cccccc" />
    <input type="text" id="pg-bg-hex" value="#cccccc" maxlength="7" />
  </div>
</div>

<div class="pg-field">
  <label>テキスト色</label>
  <div class="pg-color-row">
    <input type="color" id="pg-text-picker" value="#666666" />
    <input type="text" id="pg-text-hex" value="#666666" maxlength="7" />
  </div>
</div>

<div class="pg-field">
  <label>カスタムテキスト（空白で自動表示）</label>
  <input type="text" id="pg-custom-text" placeholder="例: ロゴここ" />
</div>

<div class="pg-field">
  <label>フォントサイズ（px）</label>
  <div class="pg-font-row">
    <input type="number" id="pg-font-size" value="0" min="0" max="500" />
    <span>0 = 自動</span>
  </div>
</div>