ここでは、
・ページ内リンク（ジャンプリンク）ってなに？という人
・ページ内リンクのタグの書きかたがわからない人、向けに
タグの書きかたと、実際にページ内リンクをクリックしてその挙動を確認できます。
ページ内リンクは、目的の箇所まで瞬時に移動できるのでおすすめです。
ページ内リンクとは別の箇所にジャンプするリンクのこと
テキストや画像をクリックすると、別の箇所にジャンプするリンクのことです。
「In-Page Links」といわれるものです。
ジャンプする先はページ内だけではなく、別のページの指定した場所にもジャンプできる便利な技なのです。
例えば文字数の多い、縦に長いページの下のほうを読みたいとき、スクロールせずにジャンプしてそこまでいけます。
目次の項目をクリックするとその箇所までジャンプできるのもページ内リンクですよね。
タグの書きかた
『ページ内ジャンプ』
ジャンプ先に書くタグ
<p id="jump">ここまでジャンプ！</p>
ジャンプ元に書くタグ
<a href="#jump">ここをクリックでidで指定した場所へジャンプさせる</a>※「jump」の部分は好きな文字に変えてもOK。このタグをCocoonの場合は「カスタムHTML」に貼りつけます。
上記のタグを実際に使ってみよう。
↓このリンクをクリックすると指定した場所までジャンプします。
ここをクリックでidで指定した場所へジャンプさせる
便利ですよね。
『別のページの指定場所へジャンプ』
<p id="jump">別のページの指定場所がここ</p>
<a href="（ここに指定のページのURLを入れる）#jump">ここをクリックでidで指定したページの場所へジャンプさせる</a>
↓例えばこんな感じです
<a href="https://yoshiyattemiru.com#jump">ここをクリックでidで指定したページの場所へジャンプさせる</a>
↓別タブで開いてジャンプさせたいとき
<a href="https://yoshiyattemiru.com#jump" target="_blank">別タブで開いてジャンプさせたいとき</a>「target=”_blank”」の脆弱性についてはこちら（rel=”noopener”をつけよう）
普段リンクリンクいっているのは「ハイパーリンク」を略したものです。
タグの「a」は「あ」ではなく「アンカー」といいます。
「ページ内リンク」は、サイト内を移動しやすくする＝SEO対策にもなるので積極的に使っていきましょう。
上記のタグはHTML5の「id属性」を使ったものですが、HTML5以前の「name属性」というタグもあり、今でも使えますが非推奨とされています。
しかし非対応ブラウザ用に「id属性」「name属性」両方書いておくといいとのことです。
<a name="jump">ここまでジャンプ！</a>
<a href="#jump">ここをクリックでnameで指定した場所へジャンプさせる</a>
Cocoonでの内部リンクや外部リンクの設定は↓こちら
【初心者向け】Cocoon リンクを別タブで開く・開かない設定
まとめ
✔ ページ内リンクは目的の箇所まですぐに辿りつけるのでおすすめ！
✔ タグはコピペでOK！
✔ SEO対策にもなるよ！
タグは目次をクリックしたときのURLのコピペでもOK
また、H2などの見出しから目次が生成されるページの場合、その目次をクリックしたときのURLをコピペすると、いつでもその見出しにジャンプすることができます。
たとえば、この記事の目次のひとつをクリックすると、
「https://yoshiyattemiru.com/archives/in-page-links.html#toc2」
こんな感じのURLがブラウザのアドレスバーに表示されます。
このURLをそのままリンクとして貼り付けるだけでその見出しへジャンプすることができます。ジャンプリンクを設置するよりカンタンにできますね。
ここまでジャンプ！
元の場所に戻るにはここをクリックads
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
ドメイン登録料金国内最安1円から「お名前.com」
【初心者でも安心】たった10分で出来るWordPressブログの始め方
