Bloggerデザイン : 料金プラン比較表

1. デザインのタイプ

【重要プラン強調型・ボタン同期価格表】
特定のプランを視覚的に際立たせつつ、情報の整列美を追求した料金プランセクションです。

各カードの高さやテキスト量が異なっても、コンバージョンに直結する「申し込みボタン」を水平に一直線に揃えることで、ユーザーの比較検討をスムーズに促します。Bloggerなどのテーマでも表示崩れが起きにくい堅牢な設計です。

• Free

  0

  yen/月

  突き出し分を考慮した余白設定により、Premiumプランの頭が見切れる心配がありません。

  申し込み

• Premium

  2,980

  yen/月

  カード上部の枠線までしっかり表示されます。記事エリア内での最大幅レイアウトです。

  申し込み

• Standard

  1,200

  yen/月

  各カードが記事幅に合わせて自動調整されるため、Bloggerの様々なテーマに適合します。

  申し込み

2. デザインの特徴

• 上部突き出しによる強調
  ネガティブマージンを使い、特定のカードだけを上に高く配置。ユーザーの視線を自然と最重要プランへ誘導します。
• ボタン位置の完全同期
  Flexboxの伸縮機能を活用し、テキスト量の差を吸収。常に全ての申し込みボタンが水平一直線に揃う美しいレイアウトです。

3. 紹介コード

<div class="cp-pricing-wrapper">
    <ul class="pricecards">
        <li class="pricecard free">
            <h3>Free</h3>
            <h4>0</h4>
            <div style="font-size:12px; color:#666;">yen/月</div>
            <p>突き出し分を考慮した余白設定により、Premiumプランの頭が見切れる心配がありません。</p>
            <a href="">申し込み</a>
        </li>

        <li class="pricecard premium">
            <h3>Premium</h3>
            <h4>2,980</h4>
            <div style="font-size:12px; color:#666;">yen/月</div>
            <p>カード上部の枠線までしっかり表示されます。記事エリア内での最大幅レイアウトです。</p>
            <a href="">申し込み</a>
        </li>

        <li class="pricecard standard">
            <h3>Standard</h3>
            <h4>1,200</h4>
            <div style="font-size:12px; color:#666;">yen/月</div>
            <p>各カードが記事幅に合わせて自動調整されるため、Bloggerの様々なテーマに適合します。</p>
            <a href="">申し込み</a>
        </li>
    </ul>
</div>

<style>
/* --- レイアウト設定：見切れ防止マージンを追加 --- */
.cp-pricing-wrapper {
    /* 突き出し分を確保するために上部に余白を設ける */
    padding-top: 40px; 
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.pricecards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 100%; 
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Poppins', sans-serif;
}

/* --- カード共通設定 --- */
.pricecard {
    flex: 1 1 30%; 
    min-width: 250px;
    text-align: center;
    border: 1px solid #eee;
    padding-bottom: 0;
    box-sizing: border-box;
    margin: 0 5px 3em; 
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- プラン名（通常） --- */
.pricecard h3 {
    background: #a2bc10;
    color: #fff;
    padding: 10px;
    margin: -1px -1px 0 -1px !important;
    font-size: 1.2rem;
    position: relative;
    top: -1px;
    border: none !important;
}

/* --- Premiumプラン：突き出し設定（見切れないようにz-indexとpaddingを同期） --- */
.pricecard.premium {
    border: 3px solid #06c7ea;
    z-index: 10;
    margin-top: -30px; /* ここで上に突き出し */
}

.pricecard.premium h3 {
    background: #06c7ea;
    margin: -3px -3px 0 -3px !important;
    padding: 15px 10px;
    position: relative; 
    top: -3px; 
}

/* --- 以下共通スタイル --- */
.pricecard h4 {
    font-size: 300%;
    margin: 0 auto !important;
    padding: 1rem 0 0 !important;
    border: none !important;
}

.pricecard.premium h4 {
    padding: 25px 0 0 !important;
}

.pricecard p {
    margin: 0;
    padding: 1rem;
    text-align: left;
    flex-grow: 1;
    font-size: 14px;
}

.pricecard a {
    padding: 10px 20px;
    background: #fb5859;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    display: block;
    margin: 0 20px 3rem; 
    font-weight: bold;
}

@media screen and (max-width: 768px){
    .cp-pricing-wrapper { padding-top: 0; } /* モバイル時は突き出さないため不要 */
    .pricecards { flex-direction: column; align-items: center; }
    .pricecard { flex: 0 0 auto; width: 100%; margin-top: 0 !important; }
    .pricecard.premium { order: 1; }
}
</style>