トップページの作成

いよいよ各ページの作成です。まずはトップページから作ります。

KV

KVではおすすめ記事を大きく見せます。リンク全体を a で包み、サムネイル・日付・タイトル・リード文を組み合わせます。

<div class="top-kv">
    <div class="top-kv-inner">
        <article class="top-kv-recommend">
            <a href="single.html" class="top-kv-recommend-link">
                <div class="top-kv-recommend-thumbnail">...</div>
                <div class="top-kv-recommend-body">...</div>
            </a>
        </article>
    </div>
</div>

装飾キャラクターなどは、骨格が固まってから絶対配置で添えると調整しやすいです。

記事一覧

記事カードは共通コンポーネント c-posts c-posts--col3 を使います。グリッドのベースは .c-posts 側です。

• 狭い画面：1列
• 少し広い画面：2列
• PC：3列

ページネーション / CTA

一覧の下に c-pagination、さらに下に c-cta を置きます。どちらも共通パーツなので、配置と余白を整えるだけで完成です。