パーツ番号 06-14-12 ・ JavaScript使用
埋め込みコードコピー付きプレビュー
プレビューカードの下にあるボタンでコピー完了状態に切り替わる。ブログパーツやウィジェットの埋め込み案内に使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。