![記事内ジャンプ](https://cocoon-moni.com/wp-content/uploads/2022/03/Cocoon-11-1024x538.png)
![ヒナギ](https://cocoon-moni.com/wp-content/uploads/2022/01/22388429-e1642686042814-150x150.jpg)
ヒナギ
記事をわかりやすくする為に、ページの中でリンクを作って記事内でジャンプをしたいんだけど、どう設定すればいいかわからない…
そんなあなたにピッタリな記事です!
ブロックの「高度な設定」を少しいじるので中級編にしていますが
結論から言うとプラグインなしで簡単2ステップで実現できるので非常に簡単です!
以下がその流れです。
ではさっそく解説していきます。
ページ内リンク(ジャンプ)とは?
![床にジャンプする男の子のイラスト(事故)](http://1.bp.blogspot.com/-Qlvf1tTs0lQ/VZt5G9qVelI/AAAAAAAAuzg/i1y0VViLKsc/s180-c/jiko_jump_yuka.png)
そもそもページ内リンク(ジャンプ)って?という方も大丈夫です。
こんなかんで、ページ内で訪問者をリンクしてジャンプさせることが可能です。
記事内で訪問者を巡回させることができ、尚且つ利便性が高まる機能なので使用することをお勧めします。
ではまずはステップ1のリンク先の「HTML アンカー」にアンカーを設定から解説していきます。
ステップ1:リンク先の「HTML アンカー」にアンカーを設定
ページ内リンク(ジャンプ)の設定の流れ
- ステップ1リンク先の「HTML アンカー」にアンカーを設定 ←ここの解説
- リンク元のテキストにリンクを設定
今見ていただいているこの記事ページを例として解説していきます。
![](https://cocoon-moni.com/wp-content/uploads/2022/02/記事内リンク1.jpg)
上記の囲っている部分に「記事内リンク」を貼って、ページの下部のブロックに飛ばしたい!とします。
![](https://cocoon-moni.com/wp-content/uploads/2022/02/記事内リンク2-1024x421.jpg)
まずは①リンク先にしたいブロックを選択します。
そして②ブロックをクリック
下の方に表示される③高度な設定をクリックします。
![](https://cocoon-moni.com/wp-content/uploads/2022/02/記事内リンク3-1024x400.jpg)
HTMLアンカーという入力画面が表示されますので今回は「link1」と記入します。
これだけでリンク先の設定は終了です。
ステップ2:リンク元のテキストにリンクを設定
ページ内リンク(ジャンプ)の設定の流れ
- リンク先の「HTML アンカー」にアンカーを設定
- ステップ2リンク元のテキストにリンクを設定 ←ここの解説
![](https://cocoon-moni.com/wp-content/uploads/2022/02/記事内リンク5.jpg)
次に①リンク元にしたいテキストをドラッグして選択します。
そして②リンクをクリックします。
![](https://cocoon-moni.com/wp-content/uploads/2022/02/記事内リンク6.jpg)
URLを入力する欄に「#link1」と入力します。※#(シャープ)は小文字なので注意!
これだけで設定は終了です。ページを公開して記事内でリンク出来ていたら成功です!
最後に
![ヒナギ](https://cocoon-moni.com/wp-content/uploads/2022/01/22388429-e1642686042814-150x150.jpg)
ヒナギ
プラグインなしでページ内リンクが出来るんだ!これで記事内の回遊性も向上するね!
コメント