パーツ番号 06-02-03 ・ CSSのみ
著者プロフィールボックス
グラデ円+イニシャルのアバターに肩書とSNSリンクを添えたボックス。ホバーでふわりと浮上します。WordPress記事末尾の著者紹介に最適。ホバーで動作します。
プレビュー
ソースコード
HTML
<div class="d06-02-03-card">
<div class="d06-02-03-avt">S</div>
<h4 class="d06-02-03-name">佐藤 花子</h4>
<p class="d06-02-03-role">Webディレクター / コンテンツ戦略担当</p>
<p class="d06-02-03-bio">10年以上の制作経験をもとに、読まれる記事づくりを支援しています。</p>
<div class="d06-02-03-sns">
<a href="#" aria-label="X">X</a>
<a href="#" aria-label="note">n</a>
<a href="#" aria-label="mail">✉</a>
</div>
</div>CSS
.prev.d06-02-03{background:#eef0f7}
.d06-02-03-card{width:100%;max-width:290px;background:#fff;border-radius:16px;padding:24px 22px;text-align:center;
box-shadow:0 6px 18px rgba(40,50,90,.08);transition:transform .3s,box-shadow .3s}
.d06-02-03-card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(40,50,90,.16)}
.d06-02-03-avt{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:26px;font-weight:800;background:linear-gradient(135deg,#4f7cf7,#9b5cf6)}
.d06-02-03-name{margin:0 0 4px;font-size:16px;color:#242a3d}
.d06-02-03-role{margin:0 0 10px;font-size:12px;color:#8a90a4}
.d06-02-03-bio{margin:0 0 16px;font-size:12px;line-height:1.7;color:#666c80}
.d06-02-03-sns{display:flex;justify-content:center;gap:10px}
.d06-02-03-sns a{width:32px;height:32px;border-radius:50%;background:#f0f2f8;color:#5b6178;display:flex;align-items:center;
justify-content:center;font-size:14px;font-weight:700;text-decoration:none;transition:.25s}
.d06-02-03-sns a:hover{background:#4f7cf7;color:#fff;transform:translateY(-3px)}クラス名 .d06-02-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。