Bloggerデザイン : モダン・ショーケース型カードデザイン

1. デザインのタイプ

【モダン・ショーケース型】
広い余白と印象的なホバーアクションを組み合わせた、特定の記事やカテゴリーを際立たせるためのシングルカードレイアウトです。読者に「クリック可能であること」を直感的に伝えるプログレス・アンダーラインと、遊び心のあるアイコンギミックが特徴です。

Featured Category

Blog Layout Title

アイコンのホバーギミックを維持したシングルカラム・レイアウトです。 幅を80%に抑えることで、1枚のカードとしての存在感を高めています。 下部のRead Moreリンクにもアニメーションを実装しています。

Read More

2. デザインの特徴

• シングルカラム・フォーカス
  コンテンツ幅を80%に絞ることで視線を中央に集め、情報を整理して伝えることができます。
• インタラクティブなアイコン
  左上に配置されたアイコンに触れるとカテゴリー名がスライドして現れる、遊び心のあるギミックを搭載しています。
• プログレス・アンダーライン
  カード全体にホバーすると、下部にスタイリッシュなラインが伸びるエフェクトを採用。読者に「クリック可能であること」を直感的に伝えます。

3. 紹介コード

HTML・CSS

<!-- 全文は上記スタイルとHTMLを組み合わせてご利用ください -->
<style>
.cp-single-layout { /* ...スタイル省略... */ }
</style>

<div class="cp-single-layout">
  <div class="cp-single-container">
    <!-- ...コンテンツ... -->
  </div>
</div>