Bloggerデザイン : ミニマルグリッドカード

1. デザインのタイプ

【ソリッド・ミニマル・グリッド】
直角のライン and 深い紺色の背景が、コンテンツの「質」を際立たせる。余計な飾りを一切排除し、中身の分量に関わらず美しさを保つ、機能美を追求したカードレイアウトです。

タイトル 01

本文がここに入ります。分量が変わっても、下のボタンは常に一番下に配置されます。

READ MORE

タイトル 02

短文のテストです。ボタンの位置をチェックしてください。

READ MORE

タイトル 03：少し長めの見出し見本

本文のテキストを少し増やしてシミュレーションします。カード全体の高さが揃い、ボタンも最下段に並びます。

READ MORE

タイトル 04

最後のエントリーです。全4枚のグリッドレイアウトを確認してください。

READ MORE

2. デザインの特徴

• 鋭角なソリッドデザイン
  カードの角丸をあえて無くすことで、信頼感と力強さを演出。モダンで引き締まった印象を与えます。
• ボトムフィックス・ボタン
  本文の量にかかわらず、すべてのカードで「READ MORE」の位置を最下段に統一。グリッド全体の視覚的なリズムを崩しません。
• 高コントラストな配色
  深い紺色の背景に真っ白なボタンを配置。迷いなく次のアクション（記事を読む）へと視線を誘導します。
• レスポンシブに対応
  幅750pxを境に2列から1列へ流動的に変化。読みやすさと一覧性を両立させた絶妙なバランスを維持します。

3. 紹介コード

<div class="blg-grid-container">
  <div class="blg-card">
    <div class="blg-card-content">
      <h3 class="blg-card-title">タイトル</h3>
      <p class="blg-card-text">本文</p>
    </div>
    <a href="#" class="blg-readmore">READ MORE</a>
  </div>

  <div class="blg-card">
    <div class="blg-card-content">
      <h3 class="blg-card-title">タイトル</h3>
      <p class="blg-card-text">本文</p>
    </div>
    <a href="#" class="blg-readmore">READ MORE</a>
  </div>

  <div class="blg-card">
    <div class="blg-card-content">
      <h3 class="blg-card-title">タイトル</h3>
      <p class="blg-card-text">本文</p>
    </div>
    <a href="#" class="blg-readmore">READ MORE</a>
  </div>

  <div class="blg-card">
    <div class="blg-card-content">
      <h3 class="blg-card-title">タイトル</h3>
      <p class="blg-card-text">本文</p>
    </div>
    <a href="#" class="blg-readmore">READ MORE</a>
  </div>
</div>

<style>
:root {
  --blg-bg-color: #1b1b34;
}

.blg-grid-container {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}

.blg-card {
  background-color: var(--blg-bg-color) !important;
  padding: 30px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column; 
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.blg-card-content {
  margin-bottom: 50px;
}

.blg-card .blg-card-title {
  color: #ffffff !important;
  margin: 0 0 15px 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.4;
  border: none;
}

.blg-card .blg-card-text {
  color: #ffffff !important;
  margin: 0;
  font-size: 0.95em;
  line-height: 1.6;
  opacity: 0.9;
}

.blg-card a.blg-readmore {
  display: block;
  text-align: center;
  padding: 12px;
  background-color: #ffffff !important;
  color: var(--blg-bg-color) !important;
  text-decoration: none !important;
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: auto; 
  border-radius: 4px;
}

@media screen and (min-width: 750px) {
  .blg-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 550px) {
  .blg-grid-container {
    grid-template-columns: 1fr;
  }
}
</style>