ウェブページを作っていて他のページへのリンクを作成することは多いと思います。でも同じページ内へのリンクも作りたくなることってありますよね。
例えばページの先頭に目次を作ったり、ページ内の他の場所へ誘導したりする場合にはページ内リンクが必要になります。
このページではそんなページ内リンクを作成する方法について解説します。最初にまず考え方を解説しますので、手っ取り早くリンクを作る方法を知りたい方は HTML での作成方法もしくはワードプレスでの作成方法（ビジュアルエディター）・ワードプレスでの作成方法（コードエディター）に飛んでいただければと思います。
Contents
ページ内リンク作成の考え方
ページ内リンクとは、もっと正確に言えば「ページ内の要素へのリンク」と言えます。
要素とはウェブページを構成する部品みたいなものです。例えば「見出し」や「段落」「画像」などが要素です。この要素がたくさん集まってウェブページが作られてますよね。
単純にウェブページを作成した場合、これらの要素は名前を持ちません。ですので要素同士で見分けがつきません。見分けがつかないので、リンク先としても設定しようがありませんよね。
ですので、ページ内リンク作成は下記の二つの手順で行います。
まず id 属性を用いて、要素が見分けられるように要素に名前を設定します
●名前をつけた要素へのリンクを貼る
リンク先に要素の名前を指定し、リンクでその要素に飛べるように設定します
HTML での作成方法
まずは HTML でのページ内リンクの作成方法について解説します。
スポンサーリンク
スポンサーリンク
スポンサーリンク
要素に名前をつける
まずは要素に名前をつけてリンク先に設定できるようにします。
要素に名前を付けるためには、要素のタグ名の後ろに下記のように id = “名前” を追記すれば良いです。
<h2 id = "midashi1">見出し１</h2>これにより要素に名前が付きます。
名前が付いたので、他の要素と見分けがつくようになり、これによりこの要素へリンクを貼ることが可能になります。
ちなみに見出し以外の要素にも名前をつける事ができ、これにより見出し以外の要素へのページ内リンクを貼ることも可能になります。例えば下記のように強調要素に名前をつけて、強調要素へのリンクを貼ることもできます。
<p>名前をつけられるのは<strong id="strong1">見出しだけではありません</strong></p>/code>名前をつけた要素へのリンクを貼る
次は実際にリンクを貼る作業を行います。リンクを作成し、リンク先に名前をつけた要素を設定します。やり方は基本的に他のページへのリンクを貼るのと同じです。
下記のように記述することでページ内の要素へのリンクを作成する事ができます。
<a href = "#midashi1">見出し１へのリンク</a>ポイントは ” 〜 ” の部分に「#要素の名前」と書くところですね。要素の名前に # 記号を書く事で id 属性で付けた名前へのリンクとなります。” 〜 ” に「要素の名前」のみを記述しても上手くリンクが貼れませんし、# 以外の記号を記述してもダメです。
ワードプレスでの作成方法（ビジュアルエディター）
続いてワードプレスの投稿画面からページ内リンクを作成方法する方法について解説していきます。ビジュアルエディターからでもコードエディターからでもページ内リンクは作成可能です。まずは、ビジュアルエディターからページ内リンクを作成する方法について解説します。
スポンサーリンク
スポンサーリンク
スポンサーリンク
要素に名前をつける
ビジュアルエディターであれば、要素の名前は非常に簡単に行えます。
要素の名前の設定は下記の４手順で行う事が可能です。
①「見出し」のブロックを選択する
②「ブロックタブ」を表示する
③「高度な設定」を開く
④「HTML アンカー」に名前を入力する
ビジュアルエディターでは、名前（id 属性）を設定できるのは「見出しのみ」になります。
名前をつけた要素へのリンクを貼る
リンクの貼り方は他のページへのリンクと同じです。下記の３手順を実施すればオーケーです。
①リンクにしたい文字列を選択する
②リンクボタンをクリックする
③要素の名前を入力してエンターキーを押す
手順３でリンク先を設定するときに「#」を忘れないようにしましょう。
ワードプレスでの作成方法（コードエディター）
最後にワードプレスのビジュアルエディターからページ内リンクを作成する方法について解説します。こちらは基本的に HTML での作成方法と同じ手順になりますので、こちらでは説明を簡略化させていただいています。
スポンサーリンク
スポンサーリンク
スポンサーリンク
要素に名前をつける
要素のタグ名の後ろに下記のように id = “名前” を追記します。
<h2 id = "midashi1">見出し１</h2>ビジュアルエディターとは異なり、見出し以外の要素にもリンクを貼る事が可能です。
<p>名前をつけられるのは<strong id="strong1">見出しだけではありません</strong></p>/code>名前をつけた要素へのリンクを貼る
下記のようにリンク先を設定する href の ” 〜 ” に「#要素の名前」を記述することでページ内の要素へのリンクを作成する事ができます。
<a href = "#midashi1">見出し１へのリンク</a>まとめ
このページではページ内リンクを作成する方法について解説しました。ページ内リンクを利用すればページ内の目次を作成することも可能です。
簡単にページ内リンクは作成する事ができますので、是非、この機会に作成方法をマスターしてください！
[…] HTML での作成方法 […]