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

ログイン促進バナー

記事の途中に配置する帯状のログイン促進バナーです。非会員に対してMemberPressのログインページへ誘導する用途に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-08-banner">
          <span class="d10-12-08-icon">🔒</span>
          <span class="d10-12-08-text">ログインして続きを読む</span>
          <span class="d10-12-08-cta">ログイン</span>
        </div>

CSS

.d10-12-08-banner{ width:100%; display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:10px; background:#eef2ff; border:1px solid #c7d2fe; }
        .d10-12-08-icon{ font-size:16px; }
        .d10-12-08-text{ flex:1; font-size:12px; font-weight:700; color:#3730a3; }
        .d10-12-08-cta{ padding:6px 14px; border-radius:999px; background:#4338ca; color:#fff; font-size:11px; font-weight:700; }

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