リッチエディタでページ内リンクを作成することはできますか?
→ 仕様上の課題により難しいポイントがあり、目次の実装にて対応することを推奨します。
設定方法
一般的にページ内リンクを設定する場合は、以下のような手順を踏みます。
1. リンク先の要素にid
属性を設定する
<h1 id="section1">セクション1</h2>
2. ページ内リンクを設定する
<a href="#section1">セクション1へ移動</a>
microCMSのリッチエディタの場合、id属性は手動で付与することはできません。その代わり、見出し1〜5までのタグを利用した場合は、idが自動で付与される仕様となっています。
<h1 id=\"ha879678dfe\">見出し1</h1>
<h5 id=\"h169558c650\">見出し5</h5>
そのため、この値を利用してリンクを付与することは技術上可能です。
課題
一方で、以下のような仕様上の制約から、運用にご利用いただくためには課題があります。
1. id
の値は、見出し内の文字列によって動的に生成されるため、更新によって変動し、リンク切れが発生する可能性がある
2. id
の値は、コンテンツAPIにアクセスしないと確認することができない
3. リッチエディタのリンクURLの設定値のバリデーションで、#
から始まる値が設定できず、ファイル名を含めてリンクする必要がある(/about.html#hoge
)
代替の運用案
ページの閲覧性を上げる目的で、ページ内リンクを設ける場合については、個別にページ内リンクを付与する方法ではなく、目次を生成する方法をおすすめしています。
▼ Next.js で目次機能を実装してみよう
https://blog.microcms.io/next-microcms-toc/