← 動的パーツギャラリーへ戻る

パーツ番号 06-02-03 ・ CSSのみ

著者プロフィールボックス

グラデ円+イニシャルのアバターに肩書とSNSリンクを添えたボックス。ホバーでふわりと浮上します。WordPress記事末尾の著者紹介に最適。ホバーで動作します。

bloghovercss

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。