コンポーネントの作成

サイト全体で使い回すパーツを、先にコンポーネントとして用意します。ページ数が多いサイトほど、ここが効いてきます。

見出し / ボタン

ページ見出しは c-title-level1、セクション見出しは c-title-level2 です。白文字や中央寄せは修飾クラスで切り替えます。

ボタンは c-button をベースに、白ベース（--white）や中央寄せ（--center）を足します。

記事カード

ブログ一覧・トップの最新記事で使うカードは c-posts として切り出します。

<article class="c-post">
    <a href="single.html">
        <div class="c-post-thumbnail">...</div>
        <time class="c-post-date">...</time>
        <h2 class="c-post-title">...</h2>
    </a>
</article>

サムネイルは正方形（aspect-ratio: 1）にして、一覧の見た目を揃えます。

ページKV / Instagram / ページネーション

• 下層の見出し帯：c-page-kv（ページごとに修飾クラス）
• 各ページ下部のSNS導線：c-instagram
• 一覧のページ送り：c-pagination

これらを先に作っておくと、下層ページはほぼ組み立てだけで進みます。