パーツ番号 05-01-10 ・ CSSのみ

ブログ記事カード

サムネ・カテゴリバッジ・日付・2行制限タイトルを備えた実用型。ホバーでバッジ色が変わりタイトルに下線が伸びます。WordPressの記事一覧の定番形です。

hovercss

プレビュー

ソースコード

HTML

<div class="card05-01-10">
          <div class="th05-01-10"><span class="bd05-01-10">レシピ</span></div>
          <div class="body05-01-10">
            <time class="dt05-01-10" datetime="2026-07-01">2026.07.01</time>
            <h4 class="ttl05-01-10"><span>夏野菜たっぷり！15分で作れる冷製パスタの簡単レシピまとめ</span></h4>
            <span class="more05-01-10">続きを読む &rarr;</span>
          </div>
        </div>

CSS

.prev.d05-01-10{background:#f1f2f5}
        .d05-01-10 .card05-01-10{
          width:224px;background:#fff;border-radius:12px;overflow:hidden;
          box-shadow:0 4px 12px rgba(20,25,40,.12);cursor:pointer;
          transition:box-shadow .3s ease;
        }
        .d05-01-10 .card05-01-10:hover{box-shadow:0 10px 24px rgba(20,25,40,.18)}
        .d05-01-10 .th05-01-10{
          position:relative;height:100px;
          background:
            radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 14px, transparent 15px),
            linear-gradient(140deg,#e8d76a 0%,#a8c95b 50%,#5b9b5e 100%);
        }
        .d05-01-10 .bd05-01-10{
          position:absolute;left:10px;top:10px;font-size:9px;letter-spacing:.08em;
          background:#fff;color:#3e7a41;font-weight:700;
          padding:3px 10px;border-radius:99px;
          transition:background .3s ease,color .3s ease;
        }
        .d05-01-10 .card05-01-10:hover .bd05-01-10{background:#3e7a41;color:#fff}
        .d05-01-10 .body05-01-10{padding:12px 16px 14px}
        .d05-01-10 .dt05-01-10{font-size:9.5px;color:#aaa;letter-spacing:.05em}
        .d05-01-10 .ttl05-01-10{
          margin:5px 0 8px;font-size:12.5px;line-height:1.55;color:#222;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
          overflow:hidden;
        }
        .d05-01-10 .ttl05-01-10 span{
          background:linear-gradient(#3e7a41,#3e7a41) left bottom / 0 1.5px no-repeat;
          transition:background-size .4s ease;
        }
        .d05-01-10 .card05-01-10:hover .ttl05-01-10 span{background-size:100% 1.5px}
        .d05-01-10 .more05-01-10{font-size:10px;color:#3e7a41;font-weight:600}

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