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

限定コンテンツロック表示

鍵アイコンと「会員限定」の文字をサムネイルに重ねてロック状態を示す表示です。MemberPressの未購入コンテンツ一覧のカードに使えます。

membershipcss

プレビュー

ソースコード

HTML

<div class="d10-05-03-card">
          <div class="d10-05-03-thumb"></div>
          <div class="d10-05-03-lock">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
            <span>会員限定</span>
          </div>
        </div>

CSS

.d10-05-03-card{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden}
        .d10-05-03-thumb{
          width:100%;height:100%;
          background:linear-gradient(135deg,#0ea5e9,#6366f1);
          filter:blur(2px) brightness(.8);
        }
        .d10-05-03-lock{
          position:absolute;inset:0;
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
          background:rgba(15,23,42,.45);
          color:#fff;font-size:13px;font-weight:700;
        }

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