【ワードプレス】記事の中をジャンプで飛びたい!ページ内リンク(アンカーリンク)を貼る方法

スポンサーリンク
【ワードプレス】記事の中をジャンプで飛びたい!ページ内リンク(アンカーリンク)を貼る方法

ブログを作っていく中で、「この記事の中のある部分までジャンプさせたい!」…と思ったことはありませんか?

外部リンクや内部リンク(自分のブログ内)は、

こういったアイコンをクリックして、飛びたいURLを入力すれば飛べますが、この記事のページ内に飛びたい場合があります。

その方法を解説していきたいと思います。

スポンサーリンク

ページ内リンクの貼り方

ページ内リンクは以下のコードを使えば簡単に設置することができます。

リンク元に、

<a href="#id名"> リンク元の言葉</a>

リンク先に

<a id="id名"></a>

を設置するだけ!

「id名」の部分を自分でわかりやすい名前をつけて、「リンク元の言葉」をコードで囲みます。

この時、コードエディターに変えて設置してください。

実際にページ内リンクを設置してみたいと思います。

ページ内リンクを貼り付けてみる

ここ」をクリックして「まとめ」の見出しまで飛ばしたい場合。

  ↑↑ 実際にクリックしてみてください。「まとめ」まで飛びます。

STEP1:コードエディターに変えて「ここ」をコードで囲む

ダッシュボードの右上にある「・三つ」をクリックし「コードエディター」を選びます。

コードエディターになったら、リンク元の言葉を「<a href=”#id名”></a>」で囲みます。その時、「#id名」も任意の言葉に変えます。今回は「#まとめ」にしました。

STEP2:リンク先にコードを貼り付ける

リンク先に「id名」を「まとめ」に変えて、「<a id=”id名”></a>」を貼り付けます。

見出しの「まとめ」の直前に貼り付けました。

「ビジュアルエディター」に戻します。

「ビジュアルエディター」に戻すと「見出しのまとめ」の前に上記の警告が出ますが、ブロックのリカバリーはしてもしなくても大丈夫です。

ブロックのリカバリーをすると、

上記のようにコードが変更されますが、普通にリンクは飛びます。

ただ、リカバリーをしないほうが、リンクが飛ぶ場所が的確な場所に飛ぶと思います。

「ブロックのリカバリー」をした時

「ブロックのリカバリー」をしなかった時

まとめ

簡単でしょ?コードを適切に貼り付けるだけで、ページ内リンクを貼ることができました。

今回の記事は、かなり短い記事なので、ページ内リンクにあんまり意味がありませんが、長い記事を書くときは、長すぎてある特定の場所まで飛ばしたい時に効果的です。

ぜひ、ページ内リンクを活用しましょう!

▼クリック!応援お願いします!▼

PVアクセスランキング にほんブログ村

タイトルとURLをコピーしました