20秒で完成!ページ内リンクの作成方法を解説

ページ内リンクの作成方法解説ページのアイキャッチ

このページにはプロモーションが含まれています

ウェブページを作っていて他のページへのリンクを作成することは多いと思います。でも同じページ内へのリンクも作りたくなることってありますよね。

例えばページの先頭に目次を作ったり、ページ内の他の場所へ誘導したりする場合にはページ内リンクが必要になります。

ページ内リンクが使用される目次の図

このページではそんなページ内リンクを作成する方法について解説します。最初にまず考え方を解説しますので、手っ取り早くリンクを作る方法を知りたい方は HTML での作成方法もしくはワードプレスでの作成方法(ビジュアルエディター)ワードプレスでの作成方法(コードエディター)に飛んでいただければと思います。

ページ内リンク作成の考え方

ページ内リンクとは、もっと正確に言えば「ページ内の要素へのリンク」と言えます。

要素とはウェブページを構成する部品みたいなものです。例えば「見出し」や「段落」「画像」などが要素です。この要素がたくさん集まってウェブページが作られてますよね。

ページが要素から構成される様子

単純にウェブページを作成した場合、これらの要素は名前を持ちません。ですので要素同士で見分けがつきません。見分けがつかないので、リンク先としても設定しようがありませんよね。

ですので、ページ内リンク作成は下記の二つの手順で行います。

●要素に名前をつける

まず id 属性を用いて、要素が見分けられるように要素に名前を設定します

 

●名前をつけた要素へのリンクを貼る

リンク先に要素の名前を指定し、リンクでその要素に飛べるように設定します

HTML での作成方法

まずは HTML でのページ内リンクの作成方法について解説します。

スポンサーリンク

スポンサーリンク

スポンサーリンク

要素に名前をつける

まずは要素に名前をつけてリンク先に設定できるようにします。

要素に名前を付けるためには、要素のタグ名の後ろに下記のように id = “名前” を追記すれば良いです。

<h2 id = "midashi1">見出し1</h2>

これにより要素に名前が付きます。

要素に名前がつけられる様子

名前が付いたので、他の要素と見分けがつくようになり、これによりこの要素へリンクを貼ることが可能になります。

ちなみに見出し以外の要素にも名前をつける事ができ、これにより見出し以外の要素へのページ内リンクを貼ることも可能になります。例えば下記のように強調要素に名前をつけて、強調要素へのリンクを貼ることもできます。

<p>名前をつけられるのは<strong id="strong1">見出しだけではありません</strong></p>/code>

名前をつけた要素へのリンクを貼る

次は実際にリンクを貼る作業を行います。リンクを作成し、リンク先に名前をつけた要素を設定します。やり方は基本的に他のページへのリンクを貼るのと同じです。

下記のように記述することでページ内の要素へのリンクを作成する事ができます。

<a href = "#midashi1">見出し1へのリンク</a>

ポイントは ” 〜 ” の部分に「#要素の名前」と書くところですね。要素の名前に # 記号を書く事で id 属性で付けた名前へのリンクとなります。” 〜 ” に「要素の名前」のみを記述しても上手くリンクが貼れませんし、# 以外の記号を記述してもダメです。

ワードプレスでの作成方法(ビジュアルエディター)

続いてワードプレスの投稿画面からページ内リンクを作成方法する方法について解説していきます。ビジュアルエディターからでもコードエディターからでもページ内リンクは作成可能です。まずは、ビジュアルエディターからページ内リンクを作成する方法について解説します。

スポンサーリンク

スポンサーリンク

スポンサーリンク

要素に名前をつける

ビジュアルエディターであれば、要素の名前は非常に簡単に行えます。

要素の名前の設定は下記の4手順で行う事が可能です。

①「見出し」のブロックを選択する

②「ブロックタブ」を表示する

③「高度な設定」を開く

④「HTML アンカー」に名前を入力する

ビジュアルエディターから要素の名前を設定する様子

ビジュアルエディターでは、名前(id 属性)を設定できるのは「見出しのみ」になります。

名前をつけた要素へのリンクを貼る

リンクの貼り方は他のページへのリンクと同じです。下記の3手順を実施すればオーケーです。

①リンクにしたい文字列を選択する

②リンクボタンをクリックする

ジュアルエディターからリンクを貼る様子1

③要素の名前を入力してエンターキーを押す

ビジュアルエディターからリンクを貼る様子2

手順3でリンク先を設定するときに「#」を忘れないようにしましょう

ワードプレスでの作成方法(コードエディター)

最後にワードプレスのビジュアルエディターからページ内リンクを作成する方法について解説します。こちらは基本的に HTML での作成方法と同じ手順になりますので、こちらでは説明を簡略化させていただいています。

スポンサーリンク

スポンサーリンク

スポンサーリンク

要素に名前をつける

要素のタグ名の後ろに下記のように id = “名前” を追記します。

<h2 id = "midashi1">見出し1</h2>

ビジュアルエディターとは異なり、見出し以外の要素にもリンクを貼る事が可能です。

<p>名前をつけられるのは<strong id="strong1">見出しだけではありません</strong></p>/code>

名前をつけた要素へのリンクを貼る

下記のようにリンク先を設定する href の ” 〜 ” に「#要素の名前」を記述することでページ内の要素へのリンクを作成する事ができます。

<a href = "#midashi1">見出し1へのリンク</a>

まとめ

このページではページ内リンクを作成する方法について解説しました。ページ内リンクを利用すればページ内の目次を作成することも可能です。

簡単にページ内リンクは作成する事ができますので、是非、この機会に作成方法をマスターしてください!

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です