リッチエディタでページ内リンクを作成することはできますか?

→ 仕様上の課題により難しいポイントがあり、目次の実装にて対応することを推奨します。

設定方法

一般的にページ内リンクを設定する場合は、以下のような手順を踏みます。

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/