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

1. デザインのタイプ

【Modern Grid Card / モダン・グリッド・カード】

海外のポートフォリオサイトや、洗練されたテック系ブログでよく見かける2カラム・グリッドデザインです。余計な装飾を削ぎ落としたミニマルなスタイルで、どんなジャンルのブログにも馴染みます。特にトップページをホームページ風にカスタマイズ している方との相性は抜群です！

Card No.1

文章は左。ボタンはビシッと一番下に揃います。

Read article

Card No.2

2列並ぶと、グリッドの美しさが際立ちますね。余った要素は左に寄ります。

Read article

Card No.3

左側にピタッと。これでOKですか？

Read article

---

2. デザインの特徴

• 2カラム・レフトアライメント
  記事が奇数のときでも、最後の1つが中央に浮かず、左側にピタッと寄る「美しさ」を重視したレイアウトです。
• マジック・ボタンライン
  文章の長さがバラバラでも、ボタンの位置が水平にビシッと揃う「flex-grow」マジックを搭載しています。
• 大人のネイビー×角丸10px
  ボタンはあえての紺色。カドを「ちょい丸」にすることで、可愛くなりすぎない「デキるブログ」感を演出しました。
• レスポンシブ完全対応
  PCでは横2列、スマホでは自動で1列に切り替わる、今の時代に必須の設計です。

---

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

以下のコードをBloggerの「HTMLビュー」にそのまま貼り付けてください。画像URLやリンク先を変えるだけで使えます。

<!-- #CodePen2Blogger vol.1 -->

<style>
.cp-wrapper { background-color: #f3f5f7; padding: 40px 10px; font-family: 'Poppins', sans-serif; }
.cp-container { max-width: 900px; margin: 0 auto; }
.cp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.cp-card { display: flex; flex-direction: column; background-color: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.cp-card:hover { transform: translateY(-5px); }
.cp-card-img img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
.cp-card-body { flex-grow: 1; display: flex; flex-direction: column; padding: 20px 5px; }
.cp-card-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: #1b1c34; text-align: left; }
.cp-card-description { font-size: 15px; color: #666; line-height: 1.6; text-align: left; flex-grow: 1; margin-bottom: 25px; }
.cp-read-more { background-color: #1b1c34; color: #ffffff !important; text-align: center; text-decoration: none; padding: 15px 0; border-radius: 10px; display: block; width: 100%; font-size: 14px; font-weight: bold; transition: 0.3s; margin-top: auto; }
.cp-read-more:hover { background-color: #333456; transform: translateY(-2px); }
@media (max-width: 640px) { .cp-grid { grid-template-columns: 1fr; } }
</style>

<div class="cp-wrapper">
    <div class="cp-container">
        <div class="cp-grid">
            <!-- カード1 -->
            <div class="cp-card">
                <div class="cp-card-img"><img src="画像URL"></div>
                <div class="cp-card-body">
                    <h2 class="cp-card-title">タイトル1</h2>
                    <p class="cp-card-description">ここに説明文を記入します。</p>
                    <a href="リンクURL" class="cp-read-more">Read article</a>
                </div>
            </div>
            <!-- カード2 -->
            <div class="cp-card">
                <div class="cp-card-img"><img src="画像URL"></div>
                <div class="cp-card-body">
                    <h2 class="cp-card-title">タイトル2</h2>
                    <p class="cp-card-description">2枚並んでもボタンの位置が揃います。</p>
                    <a href="リンクURL" class="cp-read-more">Read article</a>
                </div>
            </div>
        </div>
    </div>
</div>