パーツ番号 07-03-08 ・ CSSのみ

縦型ショート動画枠

9:16の縦型フレームに再生ボタンと右側のいいね等アイコンを配置。WordPressでショート動画風のセクションを作りたいときに便利です。

css

プレビュー

ソースコード

HTML

<div class="d07-03-08-short">
          <button class="d07-03-08-play" aria-label="再生">
            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          </button>
          <div class="d07-03-08-side">
            <span class="d07-03-08-ic">&#9825;</span>
            <span class="d07-03-08-ic">&#128172;</span>
            <span class="d07-03-08-ic">&#8631;</span>
          </div>
          <div class="d07-03-08-caption">@channel<br><small>縦型ショート動画</small></div>
        </div>

CSS

.prev.d07-03-08{background:#111827}
        .d07-03-08-short{position:relative;width:150px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
          background:linear-gradient(160deg,#f43f5e,#a21caf 60%,#4f46e5);display:flex;align-items:center;justify-content:center}
        .d07-03-08-play{width:48px;height:48px;border:none;border-radius:50%;background:rgba(255,255,255,.85);cursor:pointer;
          display:flex;align-items:center;justify-content:center}
        .d07-03-08-play svg{width:22px;height:22px;fill:#a21caf;margin-left:2px}
        .d07-03-08-side{position:absolute;right:8px;bottom:44px;display:flex;flex-direction:column;gap:14px;color:#fff}
        .d07-03-08-ic{font-size:20px;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));transition:transform .2s}
        .d07-03-08-ic:hover{transform:scale(1.25)}
        .d07-03-08-caption{position:absolute;left:10px;bottom:12px;color:#fff;font-size:.75rem;font-weight:700;
          text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.3}
        .d07-03-08-caption small{font-weight:400;opacity:.85}

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