パーツ番号 06-10-07 ・ CSSのみ

記事メタ情報バー(著者・日付・読了時間)

著者名、公開日、読了時間を区切り線付きで横並びにするメタ情報バー。記事タイトル直下に配置する定番の情報表示。

staticcss

プレビュー

ソースコード

HTML

<div class="bar06-10-07">
          <span class="av06-10-07"></span>
          <div class="grp06-10-07"><span class="lb06-10-07">著者</span><p class="vl06-10-07">田中 円</p></div>
          <span class="dv06-10-07"></span>
          <div class="grp06-10-07"><span class="lb06-10-07">公開日</span><p class="vl06-10-07">2026.07.10</p></div>
          <span class="dv06-10-07"></span>
          <div class="grp06-10-07"><span class="lb06-10-07">読了目安</span><p class="vl06-10-07">6分</p></div>
        </div>

CSS

.d06-10-07{width:100%;}
        .d06-10-07 .bar06-10-07{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#f7f8fc;border-radius:10px;padding:14px 16px;}
        .d06-10-07 .av06-10-07{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#ffb6b9,#e8547a);}
        .d06-10-07 .grp06-10-07{display:flex;flex-direction:column;gap:2px;}
        .d06-10-07 .lb06-10-07{font-size:9px;color:#999;}
        .d06-10-07 .vl06-10-07{margin:0;font-size:11.5px;color:#222;font-weight:bold;}
        .d06-10-07 .dv06-10-07{width:1px;align-self:stretch;background:#dfe3ee;}

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