パーツ番号 06-15-10 ・ CSSのみ
埋め込みコード表示付きカード
上部に投稿プレビュー、下部に埋め込み用HTMLコード風の表示を配置したカードです。SNS投稿の埋め込み機能を紹介するブログ記事などの見本に使えます。
プレビュー
ソースコード
HTML
<div class="d06-15-10-card">
<div class="d06-15-10-preview">
<div class="d06-15-10-phead"><span class="d06-15-10-pavatar"></span><span class="d06-15-10-pname">工房だより</span></div>
<p class="d06-15-10-ptext">今週の新作を店頭に並べました。</p>
</div>
<div class="d06-15-10-code">
<blockquote class="embed-post"><br>
<a href="#">投稿を見る</a><br>
</blockquote>
<span class="d06-15-10-copy">コピー</span>
</div>
</div>CSS
.d06-15-10-card{ width:100%; max-width:250px; text-align:left; }
.d06-15-10-preview{ background:#fff; border:1px solid #e5e7eb; border-radius:10px 10px 0 0; padding:10px 12px; }
.d06-15-10-phead{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.d06-15-10-pavatar{ width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#3b82f6); flex-shrink:0; }
.d06-15-10-pname{ font-size:10.5px; font-weight:700; color:#111827; }
.d06-15-10-ptext{ font-size:10.5px; color:#374151; margin:0; }
.d06-15-10-code{ position:relative; background:#1e293b; color:#94a3b8; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; line-height:1.7; padding:10px 12px; border-radius:0 0 10px 10px; }
.d06-15-10-copy{ position:absolute; top:8px; right:8px; background:#334155; color:#e2e8f0; font-size:8.5px; padding:3px 8px; border-radius:5px; font-family:inherit; }クラス名 .d06-15-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。