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

著者の他記事リンク付きボックス

「この著者の記事一覧」への導線テキストを添えた構成。回遊率を高めたいオウンドメディア向けです。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="av">堀</div>
          <div class="tx">
            <p class="nm">堀内 さやか</p>
            <p class="rl">グルメライター</p>
            <div class="links">
              <span class="lk">この著者の記事一覧 →</span>
            </div>
          </div>
        </div>

CSS

.d06-13-07 .card{display:flex;gap:12px;width:100%;max-width:280px;padding:14px 16px;border-radius:10px;border:1px solid #eef0f3;}
        .d06-13-07 .av{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-family:sans-serif;}
        .d06-13-07 .tx{text-align:left;}
        .d06-13-07 .nm{margin:0;font-size:12.5px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-07 .rl{margin:2px 0 0;font-size:10.5px;color:#ec4899;font-family:sans-serif;}
        .d06-13-07 .links{margin-top:6px;}
        .d06-13-07 .lk{font-size:10.5px;color:#6366f1;font-weight:700;font-family:sans-serif;}

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