第29回見出しへリンクできるようにする―アンカーリンクとURLコピーを追加

第28回では、AstroブログにアイキャッチとOGP画像を追加した。

記事一覧、記事本文、SNS共有時に同じ画像を使う構成へ変更し、画像がない記事との互換性も確認した。

今回は、記事本文の見出しへ直接リンクできるようにする。

あわせて、トップページにヒーローを追加し、連載とカテゴリの表示も変更する。

今回の作業は、記事本文の共有しやすさと、トップページから各記事群へ移動する導線の修正になる。

見出しアンカーとTOP表示を変更#

今回の修正内容は、大きく分けて2つある。

1つ目は、記事本文の見出しアンカーとURLコピーの追加。
2つ目は、トップページのヒーロー、連載カード、カテゴリカードの追加。

対象はこの範囲。

記事本文のh2/h3見出し
トップページのファーストビュー
トップページの連載一覧
トップページのカテゴリ一覧
サイト全体のtitle

既存URL、既存記事本文、X投稿運用、パッケージ構成は変更しない。

また、カテゴリ、サブカテゴリ、連載、タグの構成も壊さない前提で進めた。

修正前の状態を確認する#

修正前は、記事本文の見出しに直接リンクするための表示がなかった。

AstroではMarkdown見出しにIDが付くため、内部的にはページ内リンクを使える。
ただし、画面上では見出し横にリンク操作が表示されていなかった。

長い記事の特定位置を共有したくても、読者側からは見出し単位のURLを扱いにくい。

修正前の記事本文見出し

トップページについても、サイトの内容を最初に説明するヒーローはまだ置いていなかった。

記事一覧、連載、カテゴリへ移動する導線はあったが、トップページ冒頭で「ゆまラボが何を扱うサイトか」は強く出していなかった。

修正前のトップページ冒頭

連載一覧は表示されていたが、トップページ内の入口はテキスト中心。

修正前の連載一覧

今回の作業では、この2点を同時に修正する。

Codexへ渡した作業内容#

Codexには、既存Astroプロジェクトを前提に修正を依頼した。

新規プロジェクトは作らない。
既存の構成、CSS、コンポーネント、データ定義に合わせて最小差分で実装する。

指定した主な内容は次の通り。

見出しへリンクできるようにする
見出しURLをコピーできるようにする
トップページにヒーローを追加する
トップページの連載項目をカード化する
トップページの大カテゴリ項目をカード化する
サイトtitleを変更する

実装対象の画像は、事前に確認したものだけを使うようにした。

ヒーロー画像、3連載のロゴ、4カテゴリのアイコンをZIPへ入れ、Codexにはその画像だけを使うように指定した。

公式ロゴ風の画像や、生成途中の画像は使わない。

見出しアンカーを追加する#

記事本文では、h2/h3見出しを対象にした。

実装後は、見出し横に # が表示されるようになった。

修正後の記事本文見出しアンカー

この # は、見出しへのリンクとして機能する。

対象記事で確認したところ、h2見出しにアンカーが付いていた。
確認できた本文見出しアンカーは9件。

見出し横の表示は大きなボタンにはしていない。

記事本文の見出しは読むための要素なので、リンク操作だけが目立つ表示にはしない方針にした。

URL末尾に見出しIDが付くことを確認する#

見出し横のアンカーを押すと、URL末尾に見出しIDが付く。

確認したURLは下記。

https://bringain.com/blog/heading-anchor-links/

アンカー押下後は、次のようにURLが変わった。

https://bringain.com/blog/heading-anchor-links/#astroではmarkdown見出しにidが自動で付く

これで、記事全体ではなく、特定の見出し位置を共有できる。

JavaScriptが無効な場合でも、最低限アンカーリンクとして動く構成にしている。
固定ヘッダーがある場合に見出しが隠れないよう、ジャンプ位置も考慮した。

なお、ブラウザ側でクリップボードの内容を直接読み取ると、結果は空。
ただし、アンカー押下によってURLが見出しID付きへ変わることは確認できた。

トップページへヒーローを追加する#

トップページには、サイトの内容を最初に示すヒーローを追加した。

サイトtitleは次に変更した。

ゆまラボ | Web制作 × AI ― つくる、試す、共有する

ヒーローにはこの文言を入れている。

WEB制作 × AI
つくる、試す、共有する

説明文は次の内容にした。

実際に手を動かして得た知識やノウハウを、わかりやすくまとめる実践ブログです。

実装後のトップページは次の状態になった。

修正後のトップページファーストビュー

CTAは画像の中には入れていない。
HTMLのリンクとして実装した。

最新記事を見る
連載を見る

画像内にボタン風の要素を入れると、押せるように見えて押せない表示になる。
今回は、実際にクリックできるリンクとして配置した。

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

トップページの連載一覧も変更した。

対象にした連載は、現在公開されている3つだけ。

Astro＋Cloudflareでサイトを作る
サイトを作ったら ― 運用・SEO・SNS
サイトを収益化する ― AdSense・広告運用

4つ目の連載は追加していない。

連載カードには説明入りの画像ではなく、連載ごとのロゴだけを表示した。

トップページ上で連載を探すための表示なので、カード内の情報量を増やしすぎない形にした。

公開サイト上では、「Astro＋Cloudflareでサイトを作る」は29件の記事として表示されていた。

大カテゴリをカード表示にする#

カテゴリ部分もカード表示にした。

修正後のカテゴリカード

対象は大カテゴリ4つだけ。

AI
WEB制作
サイト運用
収益化

子カテゴリにはアイコンを追加していない。

実装後の公開画面では、大カテゴリ4つが横並びで表示されていた。

各カードの中には、子カテゴリへのリンクも表示されている。
ただし、アイコンを付けたのは大カテゴリだけになる。

モバイル表示の横はみ出しを避ける#

今回の修正では、モバイルで横スクロールが出ないことも条件にした。

ヒーロー、連載カード、カテゴリカードは、画面幅に収まるようにする必要がある。
画像が大きすぎる場合や、カード内の文字が折り返されない場合、横はみ出しの原因になる。

Codexの報告では、モバイルではヘッダーを「ゆまラボ」に短縮し、横はみ出しを防止したとあった。

記事作成時点でこちらが取得できた表示確認画像はPC幅のみになる。
モバイルについては、Codex側の確認結果として残す。

変更したファイル#

Codexの報告にある主な変更ファイルを挙げる。

src/pages/index.astro
src/components/TaxonomyBrowse.astro
src/layouts/ArticleLayout.astro
src/plugins/rehype-heading-anchors.mjs

トップページ側は src/pages/index.astro を中心に変更している。
連載とカテゴリの表示は TaxonomyBrowse.astro 側も関係している。

記事本文の見出しアンカーは ArticleLayout.astro と rehype-heading-anchors.mjs が関係している。

今回、記事本文そのものは変更していない。
既存URL、既存記事本文、X投稿運用、パッケージ構成も変更していない。

ビルドと確認結果#

Codex側では、次の確認が完了している。

npm run build 成功
内部リンク切れ 0件
ホーム、記事、連載、カテゴリのHTTPステータス 200
対象記事の本文見出しアンカー 9件

公開後、こちらでも https://bringain.com/ を確認した。

確認結果をまとめる。

サイトtitleが指定内容に変更されている
トップページにヒーローが表示されている
CTAが表示されている
連載カードが3件表示されている
大カテゴリカードが4件表示されている
記事本文のh2見出し横に # が表示されている
アンカー押下でURL末尾に見出しIDが付く

見出しアンカーとTOPの変更点#

今回は、記事本文の見出しアンカーとURLコピー用のリンクを追加した。

あわせて、トップページにヒーローを追加し、連載とカテゴリの表示も変更した。

最後に変更点をまとめる。

h2/h3見出しにアンカーを追加
見出しURLを扱えるように変更
固定ヘッダー時のジャンプ位置を考慮
トップページへヒーローを追加
サイトtitleを変更
連載一覧を3件のカード表示に変更
大カテゴリ4件をカード表示に変更
モバイルで横はみ出しが出にくいように変更

次回以降は、記事数が増えてもFrontmatterの設定ミスを出しにくくするため、カテゴリ、連載、タグのチェックをビルド前に行う仕組みを検討する。