こんにちは、解説ゾロです！
「ページ内リンク」とは、同じタイトル記事内（同一ページ）で、特定の場所へ移動（ジャンプ）できるリンクのことを指しています。
- 「目次」から、それぞれの見出しのある場所への移動
- ページの最後から、ページの頭に戻る移動
- 「すでにこの内容をご存知の場合は、次の項目へお進みください。」などの移動
そうなんです！「ページ内リンク」は、好きな「場所から」好きな「場所へ」飛ばせる便利なリンクなのです。閲覧者様がいちいちマウスでカリカリしなくても、目的の場所に敏速に移動ができるユーザビリティの高いサイトを作るには必須の機能です。
WordPressの「ページ内リンク」で特定の場所へ飛ばす方法
「ページ内リンク」を設定するには、ここから飛ばす「出発点」と、ここに飛ばしたい「着地点」がワンセットになり、それが決まれば、もうできたようなものです・・・笑！
まず、解説よりも、体験していただければと思います。
今日は「出発点」を「ここが出発点です！」という文字列にしてみます。その文字をクリックすることで、指定した着地点に一瞬で飛びます。
「着地点」は、段落の「見出し2」の「ここが着地点です！」というタイトルに設定してみました。もちろん「出発点」も「着地点」も、お好きな言葉でOKです。
下記の「ここが出発点です！」のジャンプボタンをクリックしてみますと、少し下の方の着地点である「見出し2」の「ここが着地点です！」まで一瞬で飛びますので、お試しくださいませ。
「ここに戻る！」
実際には、
「出発点」から、
「着地点」までは、
長い文章の場合に、
より役立ちます・・・
が、今は体験版ですので、このくらいにしました。
「ここが着地点です！」
どうでしたか？飛びましたか？
では、先ほどの出発点である「ここが出発点です！」の一行下の「ここに戻る！」に戻ってみますので、
してくださいませ。この場合は、「ここをクリック！」が出発点になります。
「ページ内リンク」で特定の場所へ飛ばす実際のやり方
このように「ページ内リンク」の行ったり来たりを体験していただきましたので、ここで体験版は終了して、ここからは、実際にコードを書きながら解説いたします。
サイト内の別のタイトルの記事に飛ばしたり、
外部サイトに飛ばすリンクは、こちらで詳しく解説しています！
WordPressの「ページ内リンク」の「コード」
WordPressの「ページ内リンク」の出発点の「コード」
⇩まず「ここが出発点です！」を着地点まで飛ばすためのリンクコードは、
a href=”#○○”という命令文です。
a href は、リンク先を指定するよ！みたいな感じで、a（アンカータグ）とセットで「アンカーエイチレフ」と読みます。
“#○○” の、○○は、着地点のID名です。
「着地点のID名」は、わかりやすいお好きな文字列でOKですので、ここでは「01」にしましたので、
a href=”#01″となります。意味は、この出発点から、着地点の「01」に飛ばすよ！です。
②のようになります。
<a href="#01">「ここが出発点です！」</a>
WordPressの「ページ内リンク」の着地点の「コード」
③のように、着地点にしたわけです。
<h2 id="01">「ここが着地点です！」</h2>
WordPressの「ページ内リンク」コードはワンセット
今回の例で、簡単にわかりやすくいいますと、
ここから飛ばすは、a href=”#01″
ここに飛ばすは、id=”01″
こんな感じです。笑
WordPressの「ページ内リンク」の「コード」の書き方
⇩この「出発点」と「着地点」の2つのコードの書き方を解説します。いつも記事を書いているWordPressの「投稿を編集」の画面で「ビジュアル」右横の、
①の「コード」をクリックして、コードの入力画面に変えてから入力すれば完成です。複数の「ページ内リンク」を設定する場合は、同じIDを使うことができませんので、それぞれ違うIDにしてください。02とか03とか！
④と⑤の「出発点」と「着地点」の場合は「02」にしてみました。下図は、④から⑤に飛ぶということです。②から③に飛ぶのと同じ意味合いです。また、
「h2」や「h3」の見出しだけでなく、<p> タグ、<div>タグなどにもページ内リンクの設定が可能です。⇩
WordPressの「ページ内リンク」のジャンプをゆっくり
⇩通常の「ページ内リンク」の移動は一瞬でパッとジャンプしてくれますが、もう少しゆっくりとシュルシュルと移動させたい場合は、スタイルシート（CSS）に次のコードを入力することで、簡単にシュルシュルになります。高度なスタイルシート（CSS）の「テーマの編集」を行う場合はリスクもありますので、予めサイト全体のバックアップや子テーマ、ローカル環境での編集をおすすめいたします。
html {
scroll-behavior: smooth;
}
「ページ内リンク」のジャンプをゆっくりはスタイルシート
⇩では、実際にコードをスタイルシートに入力してみます。Cocoonテーマで解説いたしますが、基本は、同じです。
①のWordPressのダッシュボード上部の、
②の「管理メニュー」をクリックしますと、メニューが表示されますので、
③の「テーマの編集」をクリックしてください。⇩
「ページ内リンク」のジャンプをゆっくりは「テーマの編集」
⇩すると、
①のように「Cocoon child を編集中」の画面に変わります。この「テーマの編集」をいじる場合は必ず、
②の「編集するテーマを選択」がCocoon child（子テーマ）に選択されていることを確認してください。そして、一番下の何も書いていない最後尾までマウスでカリカリ移動して、
③のように「コード」を入力します。私は何のコードかが、すぐわかるようにコードの頭に色を変えて、
/*ページ内リンクをゆっくりスクロール*/ というふうに、メモ書きをしています。入力ができましたら、
④の「ファイルを更新」をクリックしますと、間違えが無ければ、
⑤のように「ファイルの編集に成功しました」と表示されますので「ページ内リンク」を設定した記事に戻り「変更をプレビュー」の画面からシュルシュルを確認してみてください。やっぱりパッと移動した方がいい！の場合は、今の入力したコードを削除して再度「ファイルを更新」をクリックすれば元に戻ります。⇩
「ページ内リンク」の着地点がずれる場合の簡単な調整
例えば「ページ内リンク」で、着地した場所の文字などの表示が画面の上部ギリギリで閲覧者様が着地点を確認しずらいなと思う場合があります。ただ単に下げたい場合は複雑なことはせずに、調整が可能です。
そんな時は、本来の着地点に設定する「文字やタイトル」の「1～2行」上の文字に着地点を設定すれば、簡単に解決いたします。笑！
その行数を、3行上、4行上にと、設定すればするほど、表示される着地点が徐々に下がっていきますので、上部ギリギリの表示ではなくなりますので見やすくなります。お試しくださいませ。
プリンターで文字がかすれたら、おすすめの簡単なノズル洗浄方法です！
まとめ
「ページ内リンク」は意外と簡単に設置することができます。
慣れてきましたら、画像から飛ばしたり、オリジナルのボタン
を作って飛ばしたりすると楽しいので、ぜひチャレンジしてください。
当サイトも、モバイルはトップへ戻る↑、PCは右下にアイコンを設置しておりますので、宜しければお試しくださいませ。
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：リンクの貼り方｜WordPressで好きな所へ飛ばせる方法
関連記事：「Gmail」本文中のURLに、飛ばせるリンク設定が簡単！
関連記事：WordPress ウィジェットで記事一覧のサイトマップへのリンクを表示
