パーツ番号 06-15-09 ・ CSSのみ

OGPプレビューカード(タイトル・説明・サムネイル)

サムネイル・ドメイン名・タイトル・説明文を備えたOGP風のリンクプレビューカードです。URLを貼るとSNSでどう表示されるかの見た目確認見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-15-09-card">
          <div class="d06-15-09-thumb"></div>
          <div class="d06-15-09-body">
            <div class="d06-15-09-domain">note-blog.example</div>
            <p class="d06-15-09-title">小さな工房が3年で全国に届けるまでの軌跡</p>
            <p class="d06-15-09-desc">職人の手仕事とオンライン販売を両立させた事例を、写真とともに振り返ります。</p>
          </div>
        </div>

CSS

.d06-15-09-card{ width:100%; max-width:250px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; text-align:left; }
        .d06-15-09-thumb{ height:100px; background:linear-gradient(135deg,#89f7fe,#66a6ff); }
        .d06-15-09-body{ padding:10px 12px; }
        .d06-15-09-domain{ font-size:9px; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
        .d06-15-09-title{ font-size:11.5px; font-weight:700; color:#111827; margin:0 0 4px; line-height:1.4; }
        .d06-15-09-desc{ font-size:10px; color:#6b7280; line-height:1.5; margin:0; }

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