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

ブログ運営

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

Cocoonで記事を書いていて、

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

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

スポンサーリンク
You have been blocked from seeing ads.

やりたいこと

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

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

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

スポンサーリンク
You have been blocked from seeing ads.

手順

準備するもの

・ジャンプ元の見出し・文章・語句
・ジャンプ先の見出し

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

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

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

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

今回の例では「a1」と入力しました
HTMLアンカー入力内容

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

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

スポンサーリンク
You have been blocked from seeing ads.

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

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

ジャンプしたい元の文章」のカギカッコ内の文字列を反転選択しました

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

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

「#a1」と入力しました

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

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

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

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

スポンサーリンク
You have been blocked from seeing ads.

まとめ

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

デモ

動作確認のためのデモとして残しています。

最初の見出し

ジャンプしたい元の文章
 ↑↑このカギカッコ内の赤色文字をクリックしたときに、ジャンプしたい先の見出しに飛べるようリンクを貼りたい

読み飛ばしたい章の見出し

↑↑この見出しの章は、読み飛ばせるようにしたい
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇

ジャンプしたい先の見出し

↑↑この見出しの章に飛ぶようにしたい
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇

コメント