パーツ番号 06-12-05 ・ CSSのみ
投稿者バッジ付きコメントリスト
投稿者や常連ユーザーを示すバッジをコメントに添えたデザインです。運営からの返信を分かりやすく区別したいWordPressサイトに向いています。
プレビュー
ソースコード
HTML
<ul class="d06-12-05-list">
<li class="d06-12-05-row">
<span class="d06-12-05-avatar">編</span>
<div class="d06-12-05-body">
<div class="d06-12-05-top"><span class="d06-12-05-name">編集部</span><span class="d06-12-05-badge d06-12-05-badge-author">著者</span></div>
<p class="d06-12-05-text">ご質問ありがとうございます、追記しました。</p>
</div>
</li>
<li class="d06-12-05-row">
<span class="d06-12-05-avatar">松</span>
<div class="d06-12-05-body">
<div class="d06-12-05-top"><span class="d06-12-05-name">松本 恵</span><span class="d06-12-05-badge d06-12-05-badge-regular">常連</span></div>
<p class="d06-12-05-text">いつも参考にしています。</p>
</div>
</li>
<li class="d06-12-05-row">
<span class="d06-12-05-avatar">井</span>
<div class="d06-12-05-body">
<div class="d06-12-05-top"><span class="d06-12-05-name">井上 大輔</span></div>
<p class="d06-12-05-text">初めてコメントします、勉強になります。</p>
</div>
</li>
</ul>CSS
.d06-12-05-list{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:10px; }
.d06-12-05-row{ display:flex; gap:8px; align-items:flex-start; }
.d06-12-05-avatar{ width:28px; height:28px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#38b28c,#69d29b); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.d06-12-05-body{ flex:1; }
.d06-12-05-top{ display:flex; align-items:center; gap:6px; }
.d06-12-05-name{ font-size:11px; font-weight:700; color:#221f33; }
.d06-12-05-badge{ font-size:9px; font-weight:700; border-radius:4px; padding:1px 6px; }
.d06-12-05-badge-author{ background:#eef2ff; color:#5b6bd6; }
.d06-12-05-badge-regular{ background:#ffe9e0; color:#d9622f; }
.d06-12-05-text{ margin:3px 0 0; font-size:10.5px; line-height:1.5; color:#5c5977; }クラス名 .d06-12-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。