Bloggerデザイン : matsu_U自作 カードグリッド

1. デザインのタイプ

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

東京パフォーマンスドール

1990年（平成2年）4月、原宿RUIDOを母会場にEPIC・ソニー（現：エピックレコードジャパン）・Fプロジェクトが企画した「ゴルビーズ（GOLBIES）」が起源。

後に東京パフォーマンスドールのメンバーの中心となる3人によって構成されたこのグループは、当時のソビエト連邦共産党書記長ミハイル・ゴルバチョフの愛称「ゴルビー」に由来し、ゴルバチョフの進めるペレストロイカにちなんで芸能界に革命的な衝撃をもたらそうと名づけられた。

READ MORE

Perfume

Perfume is a Japanese girl group consisting of Nocchi, Kashiyuka, and A-chan. The group formed in 2000 in Hiroshima, Japan, then moved three years later to Tokyo, where they worked with producer Yasutaka Nakata, who created a technopop identity for the group. Their performances are noted for their choreography and incorporation of technology with futuristic imagery, and Perfume has emerged as one of the most successful Japanese girl groups.

READ MORE

本田美奈子.

あどけない顔立ちと華奢な体からは想像できないような実力の持ち主であった。デビュー当初から歌のうまいアイドルとして評価されており、森川美穂や中森明菜同様、アイドル界1の歌唱力があったと言われる。

READ MORE

中森明菜

1980年代のシングル総売上げは年間ベスト50位以内のものに限っても932.5万枚、年間50位以内ランクイン曲数は22曲と、どちらも当時の女性アイドル中で1位であった。また日本レコードセールス大賞年間アーティストトータルセールス最高位の座を4回獲得している（1983年、1985年、1986年、1987年）。

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>

まつさん
シンプルイズベスト!!
使い方はあなた次第、MUGEN∞DAI