【Cocoon】同一記事内の指定の見出しへのジャンプリンクを作る方法

ブログを運営する中で調べたこと・やってみたことシリーズ。
今回は「同じ記事の中で、指定の見出しに飛べるリンクを作りたい」というもの。
ページ内リンクを作る方法です。

Cocoonで記事を書いていて、

知っている人はここの部分読み飛ばしてもらってもいいなぁ
自動で読み飛ばせるようにしたいなぁ

と思ってやり方を調べたので、実施手順についてまとめました。

やりたいこと

今回やりたいのは、
「投稿ページ内の指定の見出しに飛べるリンクを作る」ということ。
イメージはこんな感じ。

・途中関係ない人は読み飛ばして、この見出しから読んでね
・詳細はこの見出しに記載しています
・もう一度振り返る場合は、ここまで戻ってね
というような記事の書き方をしたい時に使えるかなと思います。

実際に実施した手順で作った箇所は、この記事のまとめの下部の「デモ」に残しています。

手順

ジャンプ元は見出しでも文章でも文中の語句でも構いませんが、ジャンプ先は見出しにしないといけません。

①ジャンプ先の見出しの設定

ジャンプしたい先の見出しをクリックして、見出しのブロック設定画面を開きます。

「高度な設定」の「HTMLアンカー」に、お好みの英数字を入力します。
入力した内容は後の設定で使うので、控えておきます。

同一記事内で複数設定する場合は、「HTMLアンカー」に入力した文字が重複しなければOKです。

これでジャンプ元の設定は終わりです。

②ジャンプ元の見出し・文章・語句の設定

次にジャンプ元にしたい箇所を反転選択して、[リンク]ボタンをクリックします。

リンクの編集窓に、「#」（半角シャープ）と先ほど控えた内容を続けて入力します。
「#」を入力し忘れないようにしましょう。

また、飛んだ先の見出しを新しいタブで開くようにしたければ、「新しくタブで開く」をオンにします。

内容を確認して、[Enter]キーを押すと、リンクが作成されます。
指定した文字の部分に下線が引かれ、文字色が青色に変わっていると思います。

文字色を設定していた場合、リンクを設定した際に消えてしまうので、
再度設定し直す必要があります。

ジャンプ先の設定もこれで終わりです。

動作確認して問題なければ、手順は以上です。

まとめ

同じ記事の中で、指定の見出しに飛べるリンクを作る方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。