← 動的パーツギャラリーへ戻る

パーツ番号 06-14-12 ・ JavaScript使用

埋め込みコードコピー付きプレビュー

プレビューカードの下にあるボタンでコピー完了状態に切り替わる。ブログパーツやウィジェットの埋め込み案内に使えます。

js

プレビュー

ソースコード

HTML

<div class="d06-14-12-wrap">
          <div class="d06-14-12-card">
            <div class="d06-14-12-thumb"></div>
            <p class="d06-14-12-title">埋め込み用プレビューカード</p>
          </div>
          <button class="d06-14-12-copy" type="button">埋め込みコードをコピー</button>
        </div>

CSS

.d06-14-12-wrap { width:100%; max-width:220px; display:flex; flex-direction:column; gap:8px; align-items:center; }
        .d06-14-12-card { width:100%; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff; }
        .d06-14-12-thumb { height:56px; background:linear-gradient(135deg,#93c5fd,#c4b5fd); }
        .d06-14-12-title { margin:0; font-size:11.5px; color:#374151; padding:7px 9px; }
        .d06-14-12-copy { border:none; border-radius:999px; background:#111827; color:#fff; padding:7px 14px; font-size:11.5px; font-weight:700; cursor:pointer; transition:background .25s ease; }
        .d06-14-12-copy.is-done { background:#22c55e; }

JavaScript

(function(){
          var root = document.querySelector('.d06-14-12');
          var copy = root.querySelector('.d06-14-12-copy');
          var timer = null;
          copy.addEventListener('click', function(){
            copy.classList.add('is-done');
            copy.textContent = 'コピーしました!';
            clearTimeout(timer);
            timer = setTimeout(function(){
              copy.classList.remove('is-done');
              copy.textContent = '埋め込みコードをコピー';
            }, 1800);
          });
        })();

クラス名 .d06-14-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。