Bloggerデザイン : インタラクティブ・ニュース・カード

1. デザインのタイプ

【インタラクティブ・ニュース・カード】
記事のアイキャッチ、タイトル、そして詳細文を階層的に配置し、ホバーアクションによって情報を段階的に開示する、動的なマガジンスタイルのカードデザインです。読者の目を引くズームエフェクトと、滑らかなテキストのせり上がりアニメーションが、ブログ記事のプロフェッショナルな印象を際立たせます。

27

Feb

Technology

Interactive Card

Modern UI Components

Bloggerで動作するように最適化されたこのカードは、ホバーした要素だけが正確に反応するインテリジェントなスコープ制御を備えています。

5 mins ago 18 comments

28

Feb

Design

Visual Effects

Clean & Stylish

画像ズームとテキストのせり上がりを組み合わせることで、ユーザーの興味を惹きつけ、情報の視認性を高めています。

1 hour ago 24 comments

2. デザインの特徴

• 段階的な情報開示（プログレッシブ・ディスクロージャー）
  初期状態では画像とタイトルのみを表示し、ホバーすることで詳細テキストがスルスルとせり上がります。読者の興味を惹きつけつつ、誌面をスッキリと保ちます。
• スムーズなズーム＆フェード演出
  ホバー時に背景画像が緩やかにズームし、オーバーレイの透明度が変化することで、奥行きのある高級感を演出しています。
• インテリジェント・スコープ制御
  複数のカードが並んでいても、操作中のカードだけが正確に反応する個別制御を実装。Bloggerのグリッドレイアウトでも快適に動作します。

3. 紹介コード

HTML・CSS JavaScript

<div id="blg-news-card-v4">
  <div class="news-card-container">
    <div class="post-module">
      <div class="thumbnail">
        <div class="date"><div class="day">27</div><div class="month">Feb</div></div>
        <img alt="Card Image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" />
      </div>
      <div class="post-content">
        <div class="category">Technology</div>
        <h1 class="title">Interactive Card</h1>
        <h2 class="sub_title">Modern UI Components</h2>
        <p class="description">Bloggerで動作するように最適化されたこのカードは、ホバーした要素だけが正確に反応するインテリジェントなスコープ制御を備えています。</p>
        <div class="post-meta">
          <span class="timestamp"><i class="fa fa-clock-o"></i> 5 mins ago</span>
          <span class="comments"><i class="fa fa-comments"></i> <a href="#">18 comments</a></span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* --- Card Wrapper & Variables --- */
#blg-news-card-v4 {
  background: #f2f2f2;
  padding: 40px 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.news-card-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* --- Post Module --- */
.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: #ffffff;
  min-width: 270px;
  max-width: 350px;
  height: 470px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  transition: all 0.3s linear;
}

.post-module:hover {
  box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}

/* --- Thumbnail --- */
.post-module .thumbnail {
  background: #000000;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.post-module .thumbnail .date {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: #e74c3c;
  width: 55px;
  height: 55px;
  padding: 10px 0;
  border-radius: 100%;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.post-module .thumbnail .date .day { font-size: 18px; line-height: 1; }
.post-module .thumbnail .date .month { font-size: 12px; text-transform: uppercase; }

.post-module .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s linear;
}

.post-module:hover .thumbnail img {
  transform: scale(1.1);
  opacity: 0.6;
}

/* --- Post Content --- */
.post-module .post-content {
  position: absolute;
  bottom: 0;
  background: #ffffff;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05);
}

.post-module .post-content .category {
  position: absolute;
  top: -34px;
  left: 0;
  background: #e74c3c;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.post-module .post-content .title {
  margin: 0 !important;
  padding: 0 0 10px !important;
  color: #333333 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  border: none !important;
}

.post-module .post-content .sub_title {
  margin: 0 !important;
  padding: 0 0 20px !important;
  color: #e74c3c !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  border: none !important;
}

.post-module .post-content .description {
  display: none;
  color: #666666;
  font-size: 14px;
  line-height: 1.8em;
}

.post-module .post-content .post-meta {
  margin: 30px 0 0;
  color: #999999;
  font-size: 12px;
}

.post-module .post-content .post-meta .timestamp { margin-right: 16px; }
.post-module .post-content .post-meta a { color: #999999; text-decoration: none; }
</style>
  

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function() {
  // すべての .post-module に対して個別にイベントを設定
  $('.post-module').each(function() {
    var $this = $(this);
    var $description = $this.find('.description');

    $this.hover(
      function() {
        // ホバーした時：そのカードの description だけを表示
        $description.stop(true, true).animate({
          height: "toggle",
          opacity: "toggle"
        }, 300);
      },
      function() {
        // 離れた時：そのカードの description だけを非表示
        $description.stop(true, true).animate({
          height: "toggle",
          opacity: "toggle"
        }, 300);
      }
    );
  });
});
</script>