WordPressで同じページ内の特定の場所に飛ばす方法(アンカーリンク)

スポンサーリンク

 

よく、Webサイトなどで

同じページ内に移動するリンク

を見かけると思います。

 

たとえば…

↓のリンクを押してみてください

まとめに移動します

 

 

どうでしょうか?

 

このページの下の方まで一気に飛ぶことができたかと思います。

よくある、別のページのリンクでは大体が「ページの先頭」に移動しますが、このように「特定の場所」まで移動することも可能です。

 

今回は、「WordPress」で

同じページ内の特定の場所に飛ばす方法

をご紹介します。

スポンサーリンク

アンカーリンク(ページ内リンク)

 

ページ内の特定の場所に移動することができるリンクのことを

アンカーリンク

または

ページ内リンク

と呼びます。

 

正確にはアンカーリンクという技術を使用してページ内リンクを作成します。

アンカーリンクを使うことで同じページ内だけでなく、別のページの特定の場所に移動させることも可能です。(※今回は紹介しません

 

つまりは、

アンカーリンク ➡ 移動先ページの特定の場所に移動できるリンク
ページ内リンク ➡ アンカーリンクを用いて同じページ内の特定の場所に移動できるリンク

です。

 

ページ内リンクの作り方

 

ページ内リンクを作成するためにはHTMLの知識がほんのちょっとですが必要になってきます。

というのも、移動させたい特定の場所にHTMLでidを付与する必要があります。

 

例えば、冒頭にあったまとめに移動することができるリンクでは、移動先に以下のようなidを付与しています。

 

<h2 id=”summary”>まとめ</h2>

 

id=”summary”」の部分が付与した「id」になります。

」で囲まれた、「summary」の部分は好きなもので大丈夫です。

 

ただ、あとから見たときにわかりやすいものをつけておくといいでしょう。(今回はまとめなのでsummaryにしてあります)

また、idはページ内に同じものがあってはいけません

ですので、他と被らないようなものを付けましょう。

 

WordPressでページ内リンクを作る方法

 

では、「WordPress」でページ内リンクを作成してみましょう。

 

飛ばしたい位置にidを付与する

 

まずは、ページ内リンクの移動先に「id」を付与します。

 

飛ばしたい位置をクリックしてカーソルを設定します。

 

エディタをテキストモードに切り替えます。

 

すると、HTML上で、先ほど飛ばした位置にクリックしたところにカーソルが来ますので、そこにidを付与します。

 

これで「id」の付与は完了です。

 

ページ内リンクを挿入する

 

では、いよいよ「ページ内リンク」を挿入しますが、方法はいたって簡単!

いつも通りリンクを挿入する手順で、リンクのURLに「#summary」のように

# + 付与したid

を入力してリンクを挿入するだけです。

 

これだけでページ内リンクの完成です!

 

 

まとめ

 

冒頭のリンクから来た人は、以下のリンクで戻ってください。

トップに戻る

 

以上、WordPressでページ内リンクを作成する方法でした。

コメント