パーツ番号 10-05-05 ・ CSSのみ

会員限定タグ

記事一覧のサムネイル左上に付く「Members Only」タグの見本です。MemberPressで一般記事と会員限定記事を一覧上で見分けやすくします。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-05-card">
          <div class="d10-05-05-thumb"></div>
          <span class="d10-05-05-tag">Members Only</span>
          <div class="d10-05-05-body">
            <h4>特別インタビュー記事</h4>
            <p>会員だけが読める限定コンテンツです。</p>
          </div>
        </div>

CSS

.d10-05-05-card{width:200px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.08)}
        .d10-05-05-thumb{position:relative;height:100px;background:linear-gradient(135deg,#f59e0b,#ec4899)}
        .d10-05-05-tag{
          position:absolute;margin:10px;top:0;left:0;
          background:#111827;color:#fbbf24;
          font-size:10px;font-weight:800;letter-spacing:.04em;
          padding:4px 8px;border-radius:5px;
        }
        .d10-05-05-body{padding:12px 14px}
        .d10-05-05-body h4{margin:0 0 4px;font-size:13px;color:#0f172a}
        .d10-05-05-body p{margin:0;font-size:11.5px;color:#64748b;line-height:1.5}

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