パーツ番号 10-12-01 ・ CSSのみ

ペイウォール表示(ぼかし+ボタン)

本文をぼかして登録ボタンを重ねた固定表示。MemberPress等で本文の一部だけ公開し、続きを会員限定にする用途に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-01-wrap">
          <div class="d10-12-01-body">
            <div class="d10-12-01-line"></div>
            <div class="d10-12-01-line"></div>
            <div class="d10-12-01-line short"></div>
            <div class="d10-12-01-line"></div>
            <div class="d10-12-01-line short"></div>
          </div>
          <div class="d10-12-01-overlay">
            <p class="d10-12-01-msg">この続きは会員限定です</p>
            <span class="d10-12-01-btn">会員登録して読む</span>
          </div>
        </div>

CSS

.d10-12-01-wrap{ position:relative; width:100%; }
        .d10-12-01-body{ display:flex; flex-direction:column; gap:8px; filter:blur(3px); opacity:.6; }
        .d10-12-01-line{ height:10px; border-radius:4px; background:#cbd5e1; width:100%; }
        .d10-12-01-line.short{ width:65%; }
        .d10-12-01-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.9)); }
        .d10-12-01-msg{ margin:0; font-size:13px; font-weight:700; color:#334155; }
        .d10-12-01-btn{ padding:8px 18px; border-radius:999px; background:#0f172a; color:#fff; font-size:12px; font-weight:700; }

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