パーツ番号 07-15-04 ・ CSSのみ

視聴回数表示付きサムネイル

サムネイル下部に視聴回数と投稿日を併記したカード型デザインです。人気動画一覧ページで再生数を訴求したい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="playbtn"><span class="tri"></span></span>
          </div>
          <p class="vtitle">初心者向けカメラ設定講座</p>
          <p class="views"><span class="eye">◎</span>12.4万回視聴・3日前</p>
        </div>

CSS

.d07-15-04 .card{width:220px;}
        .d07-15-04 .thumb{position:relative;width:220px;height:124px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#4a5a8a,#232c4f);}
        .d07-15-04 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;}
        .d07-15-04 .tri{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid #2b3564;margin-left:3px;}
        .d07-15-04 .vtitle{margin:8px 0 3px;font-size:12.5px;font-weight:700;color:#333;}
        .d07-15-04 .views{margin:0;font-size:11px;color:#888;}
        .d07-15-04 .eye{display:inline-block;margin-right:4px;color:#aaa;}

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