ステップカードを作って設置する方法

この記事では、Googleアドセンスの審査から運用までの流れを例に「ステップカード」の作り方を紹介します。
WordPressの固定ページやLPにも設置でき、スマホ対応済みのグリッドデザインです。

1 実装のポイント

• 9枚のステップカードをグリッドで整列（自動レスポンシブ対応）。
• 各ステップは柔らかなシャドウ付きカードで視認性アップ。
• CSSは全行に説明コメント付き。

2 HTML構造（クラシックエディタに貼り付け）

<section class="services">
  <h2 style="margin:30px 0;">Googleアドセンス運用を成功させる９つのステップ</h2>
  <div class="service-step-grid">
    <div class="service-step-card"><span>1.</span> サイトコンテンツを充実させる</div>
    <div class="service-step-card"><span>2.</span> 独自ドメインを取得する</div>
    <div class="service-step-card"><span>3.</span> ポリシーに準拠した記事を作成</div>
    <div class="service-step-card"><span>4.</span> Googleアドセンスへ申請</div>
    <div class="service-step-card"><span>5.</span> 審査結果を確認</div>
    <div class="service-step-card"><span>6.</span> 合格後に広告コードを設置</div>
    <div class="service-step-card"><span>7.</span> 広告配置の最適化</div>
    <div class="service-step-card"><span>8.</span> アクセス解析と改善</div>
    <div class="service-step-card"><span>9.</span> 安定した収益化を目指す</div>
    <div class="service-step-card"><span>10.</span> ブログ記事の更新</div>
  </div>
</section>
  

3 汎用CSS

/* -----------------------------------------------------
 * ステップカード
 * ----------------------------------------------------- */

/* セクション全体 */
.services { /* 背景と余白設定 */
  background: #f7fafc; /* 薄いグレーの背景 */
  padding: 60px 20px; /* 上下60px、左右20pxの余白 */
  text-align: center; /* 見出しを中央揃え */
}

/* カードのグリッド配置 */
.service-step-grid { /* レスポンシブな自動調整グリッド */
  display: grid; /* グリッドレイアウト */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* カードを横並びに自動調整 */
  gap: 20px; /* カード間の余白 */
  max-width: 900px; /* 最大幅を900pxに制限 */
  margin: 0 auto; /* 中央寄せ */
}

/* 各カード */
.service-step-card { /* ステップカードの基本スタイル */
  background: #fff; /* 白背景 */
  border-radius: 10px; /* カードの角を丸く */
  padding: 20px; /* 内側余白 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 柔らかな影 */
  text-align: left; /* テキストを左揃え */
  font-size: 1rem; /* 読みやすい文字サイズ */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時の効果 */
.service-step-card:hover { /* カードに浮き上がり効果 */
  transform: translateY(-4px); /* 少し上に浮かせる */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影を強調 */
}

/* ステップ番号 */
.service-step-card span { /* ステップ番号部分 */
  color: #2a4b8d; /* 青系の強調色 */
  font-weight: bold; /* 太字 */
  margin-right: 6px; /* 番号と文字の間に余白 */
  font-size: 1.2rem; /* やや大きく強調 */
}
  

4 補足

5 代用プラグイン

似た機能をプラグインで実装する場合は、“WP Grid Builder” や “Essential Blocks” などでもグリッド表示が可能です。

6 まとめ

このステップカードは、仕事の流れや訓練の順番等を視覚的に説明するのに最適です。
WordPress固定ページに直接貼り付けるだけで美しく表示され、スマホでも自動整列します。