記事詳細ページの作成

ブログ一覧から遷移する、記事詳細ページを作ります。

ページ構成

KVには一覧と同じ「blog & news」を出し、記事タイトルは本文側の h1 にします。

<div class="c-page-kv c-page-kv--blog">
    <div class="l-container-l">
        <p class="c-title-level1 c-title-level1--white">blog & news</p>
    </div>
</div>

<div class="u-ptb">
    <div class="l-container-s">
        <article class="single-article">
            <div class="single-thumbnail">...</div>
            <div class="single-date">
                <time datetime="2024-01-01" class="c-date">2024/01/01</time>
            </div>
            <h1 class="single-title">講習会を開催しました。</h1>
            <div class="single-contents">...</div>
        </article>
    </div>
</div>

見た目の大きさだけでなく、情報の階層としても正しくなるようにしましょう。ページの主題である記事タイトルが h1 です。

本文スタイル

記事本文は single-contents でスタイリングします。見出し下の余白や本文の行間を整えると、読みやすさが大きく変わります。

今回はダミーテキストを入れています。実際の案件では原稿に差し替えます。

ページ下部は他ページと同じく c-instagram を置きます。