このページの中身

記事一覧と記事を組む

パターン ／ パターン集トップ

お知らせやブログは、一覧と記事本体の2種類のページで1セットです。書体と余白は全ページ共通のまま、構造だけをパターンで組みます。
記事と一覧を組み上げた実画面
図を大きく見る

一覧ページ#

節パターン置く理由
頭タグ絞り込み件数が20を超えたら絞り込みを付ける
本体記事一覧日付と見出しだけの静かな列
足ページ送り1ページ10〜20件で割る

記事ページ#

節パターンこの節の見出し置く理由
頭記事ヘッダーh1 はここだけが持つ日付は time 要素で書く
目次記事内目次「目次」が h2見出しが4つを超えたら置く
本文本文の段組h2 から始める行長と行送りはここで決まる
図版画像と説明持たない説明は figcaption に書く
足前後の記事ナビ ＋ 関連記事3件「関連記事」が h2読み終えた人を次へ送る

記事ページの h1 は記事ヘッダーが持ちます。本文の段組 のCSSには h1 の書きぶりも入っていますが、これは本文が題ごと prose に入るページ用です。記事ページで両方を並べると、別のタイトルの h1 が2本立ちます。本文は h2 から始めてください。題が2つあるページでは、読み上げも検索結果も、どちらが記事の題なのか決められません。

目次の行き先は、本文の見出しに置く#

記事内目次 は # で始まるリンクを4本持っています。飛び先は本文の h2 に付けた id です。目次だけを貼って本文に id を置かなければ、4本とも押しても何も起きません。

目次の行この見出しの id本文に書くもの
豆を選ぶmame<h2 id="mame">豆を選ぶ</h2>
挽き目を合わせるhikime<h2 id="hikime">挽き目を合わせる</h2>
湯温と蒸らしyuon<h2 id="yuon">湯温と蒸らし</h2>
保存のしかたhozon<h2 id="hozon">保存のしかた</h2>

本文の段組 にはこの4つの id を入れてあるので、両方をそのまま貼れば目次は通ります。見出しを自分の記事のものへ書き換えるときは、目次の行・id・本文の見出しの3つを同時に直してください。片方だけ直すと、そこだけ静かに切れます。押しても何も起きないリンクは、押した人にしか分かりません。

見出しが3つ以下の記事では目次を置かず、id も要りません。あとから目次をやめるときは、目次の側を先に消してください。目次を消して id が残っても害はありませんが、id を先に消すと、目次の4本がそろって行き先を失います。

記事ページのナビは行き先を差し替える#

固定ヘッダー は1枚もののLP用に作ってあり、ナビの行き先が #work・#plan・#contact になっています。記事ページには同じ id の節が無いので、そのまま貼ると3本とも行き先を失います。記事ページに載せるときは、/about/ や /blog/ のように、そのサイトに実在するページのURLへ書き換えてください。

ダミー文は1つの店で書いてある#

記事まわりのダミー文は、LPと同じ「つばめ珈琲焙煎所」の読み物としてそろえてあります。記事ヘッダーの題は「深煎りの豆を、家でおいしくいれる」で、目次と本文はその4節です。前後ナビ・関連記事・一覧に出てくるのは同じ店の別の記事で、日付の前後も合わせてあります。

日付記事どこに出てくるか
2026.08.28水出しの仕込みは前の晩に終わらせる前後ナビの「次」・一覧
2026.08.18深煎りの豆を、家でおいしくいれるいま読んでいる記事・一覧
2026.08.05深煎りに向く豆の見分けかたと、店で使っている基準前後ナビの「前」・一覧
2026.07.30焙煎の深さで変わる、苦味と酸味のバランス関連記事
2026.07.12豆の保存は、光・空気・温度の順に効く関連記事
2026.06.28湯温を2度下げると、同じ豆でも甘く出る関連記事

言葉を差し替えるときも、1つのサイトぶんを通しで直してください。記事ヘッダーだけ自分の題にして、関連記事に別の業種の見出しが残ると、読み手はそこで話者を見失います。いま読んでいる記事の題が、前後ナビや関連記事に並ぶ別の記事名と重なっていないかも見てください。

記事ページの版面を先に決める#

出発点のCSS の --page: 80rem は、写真や3列グリッドが並ぶLP用の枠です。そのまま記事に使うと、本文が1行 全角74字程度になります。基準は全角35〜45字（数値の早見表）なので、1行に3割ぶん多く詰まっている状態です。

文章のブロックだけを狭めて直してはいけません（版面と行長）。記事ページ用の版面をコンテナに与え、そこへ目次の列を作ります。折り返す位置が、幅の指定ではなくレイアウトで説明できるようになります。

このコードで動いている見本です

このコードで動いている見本です

page は版面を作る唯一のクラスです。記事ヘッダー・本文・前後ナビ・関連記事は、すべてこの内側に置きます。包み忘れたものだけが右へはみ出します。

page を要素そのものに付けず、包む側に付けるのは、左右の余白（--gutter）の内側で右端をそろえるためです。要素に直接付けると、その要素の罫線や背景だけが余白のぶん外へ伸び、下に続く箱と32px ずれます。

目次を先に書き、広い画面では右の列へ送ります。狭い画面では本文の上に出るので、読む順と読み上げの順が一致します。幅が 704px を下回ると行長は自然に短くなります。短いぶんには読めるので、そこで枠を作り直す必要はありません。

図版だけは版面を越えて構いません。越えさせるときは幅を指定せず、.article-body の外に置きます（版面と行長）。

組む順序#

  1. 出発点のCSS を貼り、上の版面を足す
  2. 記事ページから作る。記事ヘッダー → 本文の段組 の順で骨格を立て、本文側の h1 を消して h2 から始める
  3. 本文の中身が入ってから 目次 と 図版 を足す。目次を足したら、飛び先の id を本文の h2 に置く
  4. 固定ヘッダー を載せ、ナビの行き先をそのサイトのページへ差し替える
  5. 一覧は 記事一覧 に実データを入れ、20件を超えるなら ページ送り と タグ絞り込み を足す

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。