ブログを運営する中で調べたこと・やってみたことシリーズ。
今回は「同じ記事の中で、指定の見出しに飛べるリンクを作りたい」というもの。
ページ内リンクを作る方法です。
Cocoonで記事を書いていて、
![](https://route-marker.com/wp-content/uploads/2020/07/favicon.png)
知っている人はここの部分読み飛ばしてもらってもいいなぁ
自動で読み飛ばせるようにしたいなぁ
と思ってやり方を調べたので、実施手順についてまとめました。
やりたいこと
今回やりたいのは、
「投稿ページ内の指定の見出しに飛べるリンクを作る」ということ。
イメージはこんな感じ。
![](https://route-marker.com/wp-content/uploads/2020/09/f659996d15507115fdac7c644c3936b3-500x444.png)
・途中関係ない人は読み飛ばして、この見出しから読んでね
・詳細はこの見出しに記載しています
・もう一度振り返る場合は、ここまで戻ってね
というような記事の書き方をしたい時に使えるかなと思います。
実際に実施した手順で作った箇所は、この記事のまとめの下部の「デモ」に残しています。
手順
・ジャンプ元の見出し・文章・語句
・ジャンプ先の見出し
ジャンプ元は見出しでも文章でも文中の語句でも構いませんが、ジャンプ先は見出しにしないといけません。
①ジャンプ先の見出しの設定
ジャンプしたい先の見出しをクリックして、見出しのブロック設定画面を開きます。
![](https://route-marker.com/wp-content/uploads/2020/09/3d4a3292ae2ef1d3e71b70d86f9c2c6b-500x291.png)
「高度な設定」の「HTMLアンカー」に、お好みの英数字を入力します。
入力した内容は後の設定で使うので、控えておきます。
![HTMLアンカー入力内容](https://route-marker.com/wp-content/uploads/2020/09/6bbd6d7c06e24a7243cb149a85fcb5e7.jpg)
同一記事内で複数設定する場合は、「HTMLアンカー」に入力した文字が重複しなければOKです。
これでジャンプ元の設定は終わりです。
②ジャンプ元の見出し・文章・語句の設定
次にジャンプ元にしたい箇所を反転選択して、[リンク]ボタンをクリックします。
![](https://route-marker.com/wp-content/uploads/2020/09/cd0f66d0a4efdd3f687e4c2bb88cfad5-500x188.jpg)
リンクの編集窓に、「#」(半角シャープ)と先ほど控えた内容を続けて入力します。
「#」を入力し忘れないようにしましょう。
また、飛んだ先の見出しを新しいタブで開くようにしたければ、「新しくタブで開く」をオンにします。
![](https://route-marker.com/wp-content/uploads/2020/09/6028c38654f27ba41428922640d1aa66-500x241.jpg)
内容を確認して、[Enter]キーを押すと、リンクが作成されます。
指定した文字の部分に下線が引かれ、文字色が青色に変わっていると思います。
![](https://route-marker.com/wp-content/uploads/2020/09/70085ae2bd2360af52da99f3349f01c3-500x135.jpg)
文字色を設定していた場合、リンクを設定した際に消えてしまうので、
再度設定し直す必要があります。
ジャンプ先の設定もこれで終わりです。
動作確認して問題なければ、手順は以上です。
まとめ
同じ記事の中で、指定の見出しに飛べるリンクを作る方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。
動作確認のためのデモとして残しています。
最初の見出し
「ジャンプしたい元の文章」
↑↑このカギカッコ内の赤色文字をクリックしたときに、ジャンプしたい先の見出しに飛べるようリンクを貼りたい
読み飛ばしたい章の見出し
↑↑この見出しの章は、読み飛ばせるようにしたい
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
ジャンプしたい先の見出し
↑↑この見出しの章に飛ぶようにしたい
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
コメント