第23回 カテゴリと連載に説明文を追加―連載一覧もカード表示へ変更

第22回では、記事一覧のページナビを一覧下部だけでなく上部にも追加した。

同じ修正の中で、カテゴリや連載の入口も見直している。

以前からWEB制作、AI、開発支援には具体的な説明を入れていたが、ほかのサブカテゴリには「○○の記事をまとめています。」という短い文章がまだ残っていた。

連載も同じで、詳細ページには「○○を連載順に読むことができます。」という汎用文を表示している。/series/は連載タイトルと件数だけなので、初めて開いたときに何を扱う連載なのか分かりにくい。

今回は、現在存在するカテゴリ・サブカテゴリの説明を実際の記事内容に合わせて追加し、連載にも固有の説明を持たせる。最後に/series/をカード表示へ変更する。

「○○の記事をまとめています」を残さない#

代表例として「WEB制作 ＞ 運用・改善」を見ると、修正前は次の表示になっていた。

ページ名をそのまま文章にしただけなので、「運用・改善」で具体的に何を扱っているのかは記事一覧まで見ないと分からない。

今回の変更では、taxonomyに所属する実際の記事を確認し、その内容を説明文へ反映した。

運用・改善は次の文章に変更している。

Content Collectionの分類修正やタグ整理、noindex、固定ページ、サイト内検索、sitemap、パンくず、更新日、favicon、記事一覧のページネーションなど、公開後のサイト構造と運用改善を記録しています。

これまでこの連載で実際に行った作業を並べているので、説明のために新しいテーマを作ってはいない。

説明はtaxonomy.tsで管理し、カテゴリ・サブカテゴリページ側へ直接書いていない。

現在使っているcategoryとsubcategoryを一度確認する#

今回の作業時点で記事に使われているcategoryは3つ。

ID	表示名
web-development	WEB制作
site-operation	サイト運用
ai	AI

subcategoryは8つある。

category	subcategory	表示名
WEB制作	setup	初期構築
WEB制作	design	デザイン・UI
WEB制作	deploy	デプロイ・インフラ
WEB制作	operation	運用・改善
AI	development-support	開発支援
AI	image-generation	画像生成
サイト運用	email	メール・ドメイン
サイト運用	seo	SEO・検索

WEB制作、AI、開発支援にはすでに具体的な説明があるため、今回は不用意に書き換えていない。

残っていた汎用文を中心に変更した。

分類	修正後の説明
サイト運用	公開後のゆまラボを維持・改善するため、独自ドメインのメール運用や検索エンジンへの登録・インデックス確認など、実際に行った作業を記録しています。
初期構築	WordPressを使わずAstroでサイトを始める理由、Windows環境でのプロジェクト作成、npmの警告対応、GitHubへの登録まで、開発開始時に行った準備をまとめています。
デザイン・UI	ゆまラボの見た目を見直し、ロゴ・カテゴリ表示・ヘッダー導線・モバイル表示など、記事を読みやすくするUIの修正を記録しています。
デプロイ・インフラ	Cloudflare Workersへの初回公開、GitHub連携、独自ドメイン接続、デプロイ時のエラー、無料プランの制限を確認した内容をまとめています。
運用・改善	Content Collectionの分類修正やタグ整理、noindex、固定ページ、サイト内検索、sitemap、パンくず、更新日、favicon、記事一覧のページネーションなど、公開後のサイト構造と運用改善を記録しています。
画像生成	AIで作成したゆまラボのロゴをサイトへ利用するまで、画像内の文字や小さい表示、ヘッダーへの配置を確認した記録です。
メール・ドメイン	Cloudflare Email Routingを使い、独自ドメインのcontact@bringain.com宛メールを転送して受信するまでの設定と確認を記録しています。
SEO・検索	Google Search Consoleへゆまラボを登録し、sitemap.xmlの送信とURL検査でインデックス状況を確認する手順を記録しています。

説明文は、現在その分類にある記事から確認できる範囲に留めた。

サイト運用も分類の中身が分かるようにする#

「サイト運用」は第21回までに追加した比較的新しいcategoryで、修正前の「メール・ドメイン」も短い説明のまま残っていた。

今回、親categoryのサイト運用にも具体的な説明を追加している。

サイト運用は、現時点では独自ドメインメールとSearch Consoleまわりの記事が中心になる。そのため、公開後のサイトを維持する作業として、メール運用と検索エンジンへの登録・インデックス確認を説明に入れた。

今後記事が増えて内容が変われば、その時点で説明も変更する。まだ存在しないテーマまで先に並べる方式にはしていない。

taxonomyDescription()から取得した同じ説明を本文とmeta descriptionへ使うため、ページ表示用とSEO用に文章を二重管理する必要もない。

連載にも固有の説明を持たせる#

カテゴリと同じ問題は連載にもあった。

修正前の連載詳細では、

Astro＋Cloudflareでサイトを作るを連載順に読むことができます。

という汎用文を表示していた。

これでは連載の内容が分からないので、taxonomy.tsにseriesDescriptionsを追加した。

現在の2連載には次の説明を設定している。

Astro＋Cloudflareでサイトを作る#

AstroとCloudflare Workersを使い、サイトの構築から公開、デザインや内部構造の修正までを記録した連載。

サイトを作ったら ― 運用・SEO・SNS#

『Astro＋Cloudflareでサイトを作る』でサイトを公開したあとに行った、運用・SEO・SNSまわりの作業を記録した連載。

getSeriesFromPosts()がこの説明をPostGroup.descriptionへ渡す。

そのため、同じ説明を連載一覧と連載詳細の両方で使える。

修正後の連載詳細は、汎用文ではなく連載固有の説明を表示するようになった。

meta descriptionにも同じ値を使うので、ここでも説明文は1か所で管理する。

/series/をタイトルと件数だけの一覧から変更する#

連載一覧の/series/は、修正前までかなり簡素だった。

表示内容は次の2行だけ。

Astro＋Cloudflareでサイトを作る　全22記事
サイトを作ったら ― 運用・SEO・SNS　全2記事

ヘッダーの「連載」からこのページへ来ても、タイトル以外に判断材料がほとんどない。

今回は各連載について、

• 連載タイトル
• 説明文
• 全○記事
• この連載を読む →

を1つのまとまりとして表示するようにした。

連載一覧を2列のカード表示にする#

修正後の/series/では、2つの連載をカード形式で表示している。

HTMLの構造は次の形になる。

<ul class="series-cards">
  <li class="series-card">
    <h2>連載タイトル</h2>
    <p class="series-description">連載説明</p>
    <p class="series-count">全22記事</p>
    <a class="series-card-link">この連載を読む →</a>
  </li>
</ul>

記事数の22や2はHTMLへ直接書いていない。

getSeriesFromPosts()がFrontmatterのseriesを集計し、そのgroup.countを表示する。新しい記事が連載へ追加されれば件数も自動で変わる。

PCでは2列、720px以下では1列になる。

カードは白背景、薄いborder、控えめな角丸だけにしている。影や大きなアニメーションは追加していない。今までのサイト全体から離れたカードUIにはしないようにした。

TOPページにある既存の「連載から読む」は今回変更していない。カード表示は/series/だけに適用している。

変更はtaxonomyと連載表示にまとめる#

B側で変更した主なファイルは以下。

src/components/TaxonomyBrowse.astro
src/data/taxonomy.ts
src/layouts/ArchiveLayout.astro
src/pages/series/index.astro
src/pages/series/[key].astro
src/utils/posts.ts
scripts/verify.mjs

カテゴリや連載の説明をページごとに直接書かず、taxonomy側へ集めたのが今回の中心になる。

連載についても、一覧用と詳細用で別の文章を持たず、同じseriesDescriptionsを使う。

説明を変更するときに確認する場所を減らせる。

ビルドして連載カードと説明を確認する#

ページナビの変更と合わせて、最終的に次を実行した。

npm run build
node scripts/verify.mjs
git diff --check
astro preview --background --host 127.0.0.1

ビルドは成功し、117ページを生成した。

Pagefindは33ページ、3,023語を対象に生成。RSS、sitemap、/tags/のnoindex、BreadcrumbList JSON-LDも既存の状態を維持している。

確認したのは、

• category / subcategoryの説明
• meta descriptionへの反映
• 連載詳細の固有説明
• /series/のカード表示
• カードの記事数
• 連載詳細へのリンク
• PCでの2列表示
• 狭い幅での1列化
• 横方向のオーバーフロー

など。

レスポンシブ確認は第22回と同じく、ヘッドレスブラウザの制約で320～390px指定時の実測viewportが500pxになったため、500px実測とmax-width: 520px / 720pxのCSS条件を確認している。

taxonomy説明と連載カードの変更点#

今回は分類そのものを増やしたのではなく、既にある分類と連載の説明を追加した。

• 現在使用中のcategory / subcategoryを確認
• 汎用的な「○○の記事をまとめています。」を実際の記事内容に合わせて変更
• 既存の具体的なWEB制作、AI、開発支援の説明は維持
• taxonomyの説明を本文とmeta descriptionで共通利用
• 2つのseriesへ固有説明を追加
• 連載詳細の汎用文を固有説明へ置き換え
• /series/を2列カード表示へ変更
• カードの記事数は記事Frontmatterから自動集計

記事や連載が増えても、タイトルだけではなく「この分類・連載で何を扱っているか」を入口で確認できるようになった。