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

記事ヘッダー(カテゴリ+タイトル+メタ)

グラデ帯の中にカテゴリバッジ・タイトル・日付/著者を配置。表示時に各要素がフェードアップします。WordPressの投稿冒頭のアイキャッチ帯に。画面内に入ると動作します。

blogscrollcss

プレビュー

ソースコード

HTML

<header class="d06-02-02-head io-reveal">
          <span class="d06-02-02-cat">マーケティング</span>
          <h4 class="d06-02-02-title">成果を出すコンテンツ設計の基本原則</h4>
          <div class="d06-02-02-meta">
            <span class="d06-02-02-avt">田</span>
            <span>田中 太郎</span>
            <span class="d06-02-02-dot">・</span>
            <span>2026.07.04</span>
          </div>
        </header>

CSS

.prev.d06-02-02{padding:0;display:block}
        .d06-02-02-head{height:260px;box-sizing:border-box;padding:34px 28px;display:flex;flex-direction:column;justify-content:center;
          background:linear-gradient(135deg,#5b3df0 0%,#a83bd6 55%,#e04b8a 100%);color:#fff}
        .d06-02-02-cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;background:rgba(255,255,255,.22);
          padding:5px 12px;border-radius:20px;opacity:0;transform:translateY(14px);transition:.5s .05s}
        .d06-02-02-title{margin:14px 0 12px;font-size:20px;line-height:1.45;font-weight:800;opacity:0;transform:translateY(14px);transition:.5s .18s}
        .d06-02-02-meta{display:flex;align-items:center;gap:8px;font-size:12px;opacity:0;transform:translateY(14px);transition:.5s .32s}
        .d06-02-02-avt{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.28);display:flex;align-items:center;
          justify-content:center;font-weight:700;font-size:12px}
        .d06-02-02-dot{opacity:.6}
        .d06-02-02-head.is-in .d06-02-02-cat,.d06-02-02-head.is-in .d06-02-02-title,.d06-02-02-head.is-in .d06-02-02-meta{opacity:1;transform:translateY(0)}

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