パーツ番号 03-10-08 ・ CSSのみ
ソーシャルリンク付きプロフィールサイドバー
アバター・肩書き・自己紹介文とSNSアイコンをまとめた静止したプロフィールカードです。WordPressの著者ページやブログサイドバーの執筆者紹介欄に活用できます。
プレビュー
ソースコード
HTML
<aside class="d03-10-08-card">
<span class="d03-10-08-avatar"></span>
<h4 class="d03-10-08-name">山田 太郎</h4>
<p class="d03-10-08-role">Webデザイナー / ライター</p>
<p class="d03-10-08-bio">デザインと開発の両面からWebサイト制作についての情報を発信しています。</p>
<div class="d03-10-08-social">
<span class="d03-10-08-icon"><svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#fff" stroke-width="1.7"><path d="M13 3h-2a4 4 0 0 0-4 4v2H5v3h2v6h3v-6h2.5l.5-3H10V7a1 1 0 0 1 1-1h2z"/></svg></span>
<span class="d03-10-08-icon"><svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#fff" stroke-width="1.7"><path d="M17 5.5a6.6 6.6 0 0 1-1.9.5 3.3 3.3 0 0 0 1.4-1.8 6.6 6.6 0 0 1-2.1.8 3.3 3.3 0 0 0-5.6 3A9.3 9.3 0 0 1 2 4.9a3.3 3.3 0 0 0 1 4.4 3.3 3.3 0 0 1-1.5-.4 3.3 3.3 0 0 0 2.6 3.3 3.3 3.3 0 0 1-1.5.1 3.3 3.3 0 0 0 3.1 2.3A6.6 6.6 0 0 1 1 15.9 9.3 9.3 0 0 0 6 17.5c6 0 9.3-5 9.3-9.3v-.4A6.7 6.7 0 0 0 17 5.5z"/></svg></span>
<span class="d03-10-08-icon"><svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#fff" stroke-width="1.7"><rect x="3" y="3" width="14" height="14" rx="3"/><circle cx="10" cy="10" r="3.2"/><circle cx="14" cy="6" r="0.6" fill="#fff"/></svg></span>
</div>
</aside>CSS
.prev.d03-10-08{padding:0;display:block}
.d03-10-08-card{
width:100%;height:100%;min-height:260px;box-sizing:border-box;
background:#fff;padding:28px 22px;text-align:center;
}
.d03-10-08-avatar{
display:block;width:56px;height:56px;border-radius:50%;margin:0 auto 12px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
}
.d03-10-08-name{font-size:14.5px;font-weight:800;color:#0f172a;margin:0 0 3px}
.d03-10-08-role{font-size:11.5px;color:#94a3b8;margin:0 0 12px}
.d03-10-08-bio{font-size:12px;color:#64748b;line-height:1.6;margin:0 0 16px}
.d03-10-08-social{display:flex;justify-content:center;gap:10px}
.d03-10-08-icon{
width:28px;height:28px;border-radius:50%;background:#2563eb;
display:flex;align-items:center;justify-content:center;
}クラス名 .d03-10-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。