パーツ番号 06-12-09 ・ CSSのみ

画像添付付きコメント

コメント本文に画像サムネイルを添付した見た目です。レビュー投稿に写真を添えるWordPressのショップサイトなどで参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-12-09-comment">
          <span class="d06-12-09-avatar">橋</span>
          <div class="d06-12-09-body">
            <div class="d06-12-09-name">橋本 玲奈</div>
            <p class="d06-12-09-text">届いた商品はこんな感じでした！</p>
            <div class="d06-12-09-images">
              <span class="d06-12-09-thumb d06-12-09-thumb-a"></span>
              <span class="d06-12-09-thumb d06-12-09-thumb-b"></span>
              <span class="d06-12-09-thumb d06-12-09-thumb-c"></span>
            </div>
          </div>
        </div>

CSS

.d06-12-09-comment{ display:flex; gap:10px; width:100%; }
        .d06-12-09-avatar{ width:30px; height:30px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#ff9a8b,#ff6a88); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d06-12-09-name{ font-size:11px; font-weight:700; color:#221f33; }
        .d06-12-09-text{ margin:3px 0 8px; font-size:10.5px; line-height:1.5; color:#5c5977; }
        .d06-12-09-images{ display:flex; gap:6px; }
        .d06-12-09-thumb{ width:52px; height:52px; border-radius:8px; display:block; }
        .d06-12-09-thumb-a{ background:linear-gradient(135deg,#ffd97a,#ff9a5a); }
        .d06-12-09-thumb-b{ background:linear-gradient(135deg,#6a93ff,#8f6aff); }
        .d06-12-09-thumb-c{ background:linear-gradient(135deg,#69d29b,#38b28c); }

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