記事一覧ページの作成

次はカテゴリ別の記事一覧ページです。トップページで作った共通パーツを組み立てる形が中心になります。

ページKV

カテゴリ名をページ見出しとして出します。c-page-kv を使うと、下層ページの帯を統一できます。

<div class="c-page-kv">
    <div class="l-container">
        <h1 class="c-title-level1">『JavaScript』の記事一覧</h1>
    </div>
</div>

記事一覧

カード一覧はトップと同じ c-posts です。カテゴリが違っても、カードの見た目は共通のまま中身だけ差し替えます。

ページ固有のスタイルが少ないほど、メディアサイトとしては健全です。

ページネーションとCTA

一覧の下に c-pagination と c-cta を置きます。トップページと同じ並びにしておくと、サイト全体の操作感が揃います。