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

1. デザインのタイプ

【Minimal Grid Layout / ミニマル・グリッド・レイアウト】

余白を贅沢に使い、知的な印象を与えるモダンなデザインです。派手な装飾を削ぎ落とした分、一つひとつの動き（マイクロインタラクション）の質にこだわった、大人なブログにぴったりの構成です。

Featured Story

Minimalist Collection Vol.3

幅を80%に絞り、中央に配置することで、読者の視線を記事の中身へ自然に誘導します。 贅沢な余白は、情報の重要性を際立たせ、ブログ全体のクオリティをワンランク上のものへと引き上げます。

Explore More

2. デザインの特徴

• アンダーライン・スライド
  ホバーすると右下から左へスッとラインが伸びる、小気味よいアニメーションを搭載。
• インテリジェンス・アイコン
  アイコンに触れると、隠れていたカテゴリー名やトピックが横から顔を出す、遊び心のある設計です。
• 鉄壁の文字化け対策済み
  「Read More」の矢印など、Bloggerで起こりがちな文字化けを特殊コード（Unicode）で完全回避しています。
• モバイル・ファースト
  PCでは美しい2列、スマホでは読みやすさを優先した1列に自動で切り替わるレスポンシブ仕様です。

3. 紹介コード（コピペ用）

以下のコードをコピーして、HTMLビューに貼り付けるだけで導入可能です。

<style>
/* --- vol.3 配布用チューニング済みCSS --- */
.cp3-container { max-width: 1000px; margin: 0 auto; padding: 20px; font-family: 'Merriweather', serif; }
.cp3-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.cp3-item { background: #fff; padding: 40px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.05); box-sizing: border-box; }
.cp3-item::before { content: ""; position: absolute; bottom: 0px; height: 2px; width: 0%; background: #333; right: 0px; transition: width 0.4s ease; }
.cp3-item:hover::before { width: 100%; }
.cp3-item h4 { font-family: 'Montserrat', sans-serif; font-size: 18px; margin: 25px 0 15px; letter-spacing: 2px; text-transform: uppercase; color: #333; }
.cp3-seperator { margin-bottom: 20px; width: 35px; height: 3px; background: #777; }
.cp3-item p { font-size: 13px; line-height: 1.6; color: #777; margin-bottom: 25px; }
.cp3-readmore { font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; color: #666; text-decoration: none; font-weight: bold; }
.cp3-readmore::after { content: "\2192"; opacity: 0; margin-left: -5px; transition: all 0.4s; display: inline-block; }
.cp3-readmore:hover::after { opacity: 1; margin-left: 10px; }
.cp3-icon-box { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cp3-icon-box svg { width: 24px; height: 24px; fill: #777; }
.cp3-icon-topic { font-size: 13px; color: #999; opacity: 0; transform: translateX(-10px); transition: 0.4s; }
.cp3-icon-box:hover .cp3-icon-topic { opacity: 1; transform: translateX(0); }
@media (max-width: 768px) { .cp3-grid { grid-template-columns: 1fr; } }
</style>

<div class="cp3-container">
  <div class="cp3-grid">
    <article class="cp3-item">
      <div class="cp3-icon-box">
        <svg viewBox="0 0 16 16"><path d="M13.365,0.324H3.297L0,5.109l8.331,11.229l8.331-11.229C16.662,5.109,13.365,0.324,13.365,0.324z"/></svg>
        <span class="cp3-icon-topic">Category Title</span>
      </div>
      <h4>見出し</h4>
      <div class="cp3-seperator"></div>
      <p>タイトル</p>
      <a href="#" class="cp3-readmore">Read More</a>
    </article>
    <article class="cp3-item">
      <div class="cp3-icon-box">
        <svg viewBox="0 0 16 16"><path d="M13.365,0.324H3.297L0,5.109l8.331,11.229l8.331-11.229C16.662,5.109,13.365,0.324,13.365,0.324z"/></svg>
        <span class="cp3-icon-topic">Special Topic</span>
      </div>
      <h4>Minimal Layout</h4>
      <div class="cp3-seperator"></div>
      <p>本文</p>
      <a href="#" class="cp3-readmore">Read More</a>
    </article>
  </div>
</div>