![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんにちは。サメ(@cookie_22.com)です。
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
よくブログを読んでいると、「ここをクリックして、〜へジャンプ」みたいなページの途中に飛ばすリンクを見かけるけど、あれってどうやるの??
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんな悩みを解決できる記事です!!
この記事でわかること
- ページ内リンクの設定のやり方
- 違うページの途中に飛ばす方法
この記事を書いた人
![僕](https://cookie22.com/wp-content/uploads/2021/08/91bfe02ace532bee28130dd052a8541e-1024x1024.jpg)
![僕](https://cookie22.com/wp-content/uploads/2021/08/91bfe02ace532bee28130dd052a8541e-1024x1024.jpg)
名前:サメ
- 2001年生まれ
- 大学生ブロガー
- Hello!! 404 運営者
- コロナ自粛中にブログを始める
- 3万PV達成!
- 大学生向けの情報を発信中
ブログで記事を書いていると、こんなことを思うことありませんか?
- ここの内容って知っている人は必要ないから、飛ばして途中から読めるようにしてあげたいな
- ここの説明さっきと一緒だから、記事の前の部分に飛べるようにしたいな
これは「ページ内リンク」や「記事内リンク」と言うもので解決できます。
例えばこんな感じのやつです。
ブログを読んでいるとこんなリンクが貼ってあって、記事内の好きな場所に飛ぶことができるようになると思います。
この記事はページ内リンクの作り方を詳しく写真付きで解説していきます!!
この記事を最後まで読むと、誰でも簡単に手軽にページ内リンクを設置することができるようになります!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
ページ内リンクの書き方
![ページ内リンクの書き方](https://cookie22.com/wp-content/uploads/2021/09/link-5219567_1920-1024x683.jpg)
![ページ内リンクの書き方](https://cookie22.com/wp-content/uploads/2021/09/link-5219567_1920-1024x683.jpg)
ブロックエディターの場合、めちゃくちゃ簡単にページ内リンクを設置することができます。
ザックリ言うと、以下の手順でページ内リンクを設置できます。
- ジャンプ先に「HTMLアンカー」を設置する
- ジャンプボタンにリンクを設置する
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
HTMLアンカーとか難しい単語が出てきていますが、超絶簡単なので安心してください!!
これだけではわからない方も多いと思うので、写真付きで詳しく解説していきます。
Step1:ジャンプ先にリンクを設置する
まずはここに飛びたい!というブロックに「HTMLアンカー」を設置していきます。
簡単なので安心してくださいね!!
![飛ばしたいブロックを選択](https://cookie22.com/wp-content/uploads/2021/09/fbb1f5842d02b3f16767e1e661de5e1b.png)
![飛ばしたいブロックを選択](https://cookie22.com/wp-content/uploads/2021/09/fbb1f5842d02b3f16767e1e661de5e1b.png)
まずは飛ばしたいブロックを選択します。
![高度な設定」の「HTMLアンカー」にアドレスを作成する](https://cookie22.com/wp-content/uploads/2021/09/3a650b0d6ad67df2b5e2cd473f4c0b34.png)
![高度な設定」の「HTMLアンカー」にアドレスを作成する](https://cookie22.com/wp-content/uploads/2021/09/3a650b0d6ad67df2b5e2cd473f4c0b34.png)
サイドツールバーの1番下に「高度な設定」という場所があります。
開くと「HTML アンカー」があるので、リンクを設置します。
リンクと言っても、適当な英単語で構いません。写真の場合は『link』にしています。
ただ、絶対に半角英字にしてください。
一部HTMLアンカーが設置できないブロックもあります
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
これでリンクを設置できました!!
次はジャンプボタンを作成していきます!!
Step2:ジャンプボタンを作成
ジャンプボタンは普通にいつも通りに設置して構いません。
ただ、リンクを作成するとき先頭に『#』をつけるようにしてください。
![ボタンにしたい部分を選択する](https://cookie22.com/wp-content/uploads/2021/09/0c985034e2aaeab1eb622c7cd69a1109.png)
![ボタンにしたい部分を選択する](https://cookie22.com/wp-content/uploads/2021/09/0c985034e2aaeab1eb622c7cd69a1109.png)
まずはボタンにしたい部分を選択してリンクを押しましょう。
![HTMLアンカーの最初に『#』をつけてリンクを作成](https://cookie22.com/wp-content/uploads/2021/09/cdb23ff343e5b2ee84843c6a1517ad2b.png)
![HTMLアンカーの最初に『#』をつけてリンクを作成](https://cookie22.com/wp-content/uploads/2021/09/cdb23ff343e5b2ee84843c6a1517ad2b.png)
先ほど作った「HTMLアンカー」のアドレスの最初に『#』をつけてリンクを設置します。
これでリンクが作成できました。
プレビュー画面できちんとリンク先に飛べるか確認しましょう。
飛ぶことができれば成功です!!
以上でボタンを設置することができました!!
もちろんテキストリンクだけでなく、ボタンブロックなどでも作成できます。
応用編:違うページの途中に飛ばしたい!
![応用編:違うページの途中に飛ばしたい!](https://cookie22.com/wp-content/uploads/2021/09/susan-q-yin-BiWM-utpVVc-unsplash-1024x683.jpg)
![応用編:違うページの途中に飛ばしたい!](https://cookie22.com/wp-content/uploads/2021/09/susan-q-yin-BiWM-utpVVc-unsplash-1024x683.jpg)
この技を使えば、違うページの途中にもジャンプさせることができるようになります。
こちらも意外と簡単なのでやってみましょう!!
違うページの飛ばしたい場所に先ほどと同じように「HTMLアンカー」を設置します。
ボタンに『飛ばしたいページのURL#HTMLアンカー』のリンクを設置しましょう。
たとえばこのブログの以下のページの『jump』というHTMLアンカーの場所にジャンプさせたい場合は、
『https://cookie22.com/college-blog-category/#jump』
このリンクで飛ばすことができます!
![](https://cookie22.com/wp-content/uploads/2021/09/retrosupply-jLwVAUtLOAQ-unsplash-300x200.jpg)
![](https://cookie22.com/wp-content/uploads/2021/09/retrosupply-jLwVAUtLOAQ-unsplash-300x200.jpg)
ページ内リンクのデメリットは滞在時間が短くなること
![ページ内リンクのデメリットは滞在時間が短くなること](https://cookie22.com/wp-content/uploads/2021/09/hourglass-620397_1920-1024x772.jpg)
![ページ内リンクのデメリットは滞在時間が短くなること](https://cookie22.com/wp-content/uploads/2021/09/hourglass-620397_1920-1024x772.jpg)
ページ内リンクは、ユーザビリティが向上する反面、滞在時間が短くなるデメリットがあります。
ただ、Googleではユーザーがいち早く必要な情報を手に入れることを目標にしており、滞在時間が短く検索を終了した場合、SEO的にメリットになります。
逆に滞在時間が長く、ユーザーがそのまま検索を続けた場合は長く滞在したのに必要な情報が見つからなかったとしてSEO的にマイナスになるので注意しましょう!!
滞在時間が短くなると筆者側はちょっと嫌な気もしますが、SEO的にはメリットになるので積極的にページ内リンクを設置していきましょう!
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
「ブログでは最初に結論を書け」とよく言われるのはこれが原因!!
Googleではユーザーが検索を終了したら必要な情報が手に入ったと認識するよ!!
まとめ:読者にとってより快適なページを目指そう!
いかがでしたか??ページ内リンクの設置方法が理解できましたか??
最後にこの記事の内容をまとめていこうと思います!
ページ内リンクの設置方法
- 飛ばしたいブロックに「HTML アンカー」を設置
- ボタンに「#HTMLアンカー」でリンクを作成
- 別ページに飛ばしたい場合は「URL#HTMLアンカー」で可能!
ページ内リンクはSEO的にもいいことがありますし、ユーザーも読みやすくなります積極的に利用していきましょう!!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
コメント