「ページ内リンクが飛ばない！？原因と正しい設置方法を紹介」

「記事内でリンクを作ったのにうまく飛ばない」というのは、WEBサイト制作初心者、ワードプレスを使い始めて間もない人にありがちな悩みのひとつです。

ページ内リンクとは、同じ記事の中の特定位置に移動できるリンクのことを指します。
イメージ的には「ワープホール」です。
よくRPGゲームであるような、特定の輪に入ると違うところに飛ばされるアレだと思ってください。

この記事では、ページ内リンクが飛ばない原因と対処法、使うメリットとデメリットまで解説していきます。
最後まで読むことで、あなたもページ内リンクを作れるようになることでしょう。

ページ内リンクが飛ばない原因

ページ内リンクが飛ばない原因は、主にこの二つが挙げられます。

そもそもやり方が間違っている

自分で一からリンクを作る場合「コード」というものを使っていくのですが、慣れない初心者のうちはそもそも仕組みを理解していない故に失敗しがちです。
リンクさせたいところに飛ばせなかったり、リンク元とリンク先が逆になってしまうなど、飛ばないわけではなくても使いこなせない人はとても多くいます。

プラグインの設定ができていない

ワードプレスの場合「プラグイン」というものを使ってリンク作成できるものの、うまく設定できてないケースもあります。
便利な機能も多い反面、使い始めるまでの準備段階がうまくいっていないケースです。

そもそもページ内リンクを使うべきなのか

ページ内リンクは積極的に取り入れていくべきモノの一つと言えます。
理由は単純で、上手く使えば同じユーザーが何度も見に来てくれたり、共有してくれたりする事でSEOにも強くなる、すなわち「上位表示されやすくなるから」です。

しかし、ページ内リンクはただ乱用すればいいというものではありません。ユーザーにとって便利なものでなくては読みにくいページとなってしまいます。

ここではページ内リンクのメリットとデメリット、使うべきではないタイミングを書いていきます。

ページ内リンク設置のメリット

ページ内リンクを使うことで、そのページの利便性が高まります。

こと細かく書かれた記事というのは網羅性がある反面、すべて読むとなるとハードルが高く離脱されるリスクが出てきます。ですが、利便性に優れているサイトの中には、無駄にスクロールしなくても知りたい情報が記載している箇所を簡単に把握できる構造となっており、そのようなサイトにするために、ページ内リンクを作ることで内容が整理され、ユーザーも情報を消化しやすくなり満足度向上、Googleからも評価してもらいやすくなるのです。

ページ内リンク設置のデメリット

利便性が高まる反面、あまりに多く使ってしまうと逆に読みにくくなってしまいます。
内容を整理するためにページ内リンクを作ったにもかかわらず「リンクだらけでどこを読めばいいのかわかりにくい！」となってしまっては本末転倒です。使いすぎには注意しましょう。

ページ内リンクを使うべきではない時

ページ内リンクは使いすぎなければとても優秀なモノです。
しかし、例外的に使うべきではないときもあります。

それは「リンク元とリンク先がすぐ近くにある時」です。
すぐ近くに内容が書かれてあるのにリンクを使ってしまっては、どこを読んでいたのか分からなくなってしまう等ユーザーの混乱を招いてしまうことにつながってきます。

あくまでページ内リンクの目的は「ユーザーが記事を見やすくすること」。
そのことを常に意識してリンクの作成をしていきましょう。

「自分で」ページ内リンクを作成する方法

ここでは、プラグインを使わずにページ内リンクを作成する方法を書いていきます。

今回紹介したプラグインは「見出しにリンクをつけるのに適した方法」でしたが、見出し以外でもページ内リンクを作成したい場合は今から書く方法を使ってください。

ページ内リンクは「コード」を書いて作る

自分でページ内リンクを作る場合は、「コード」を書くことが必須となります。
コードとはいわば、機械の言葉です。私たちが認識している言葉と同じように、機械もコードを認識して文字やリンクを表示させていきます。

ページ内リンクで使うコードは、次の二つです。

<a href=”#a”>テキスト文</a>
<a name=”a”>テキスト文</a>

一つずつ説明していきます。

<a href=”#a”>テキスト文</a>　は、ワープホールの入り口

先に書いた通り、リンクとはワープホールのようなものです。
入り口と出口があり、こちらは入り口（ワープするために押すところ）になります。

リンクサンプル

<a href="#a">テキスト文</a>

<a name=”a”>テキスト文</a>は、ワープホールの出口

こちらのコードは出口（ワープして飛ぶ場所）を作るために使います。俗にいう「リンク先」ですね。

リンクサンプル

<a name="a">テキスト文</a>

「”#a”」と「”a”」の部分が大事

とに付く「○」に入る文字が重要で、この「○」の部分が同じ文字であればリンクがつながるのです。

ｂ、c、d…リンクの数が増えば増えるだけ、文字を変える必要が出てくるので注意しましょう。

（例）「文章１から文章２へのリンク」と「文章３から文章４へのリンク」をそれぞれ作りたい場合

文章１から文章２へのリンクはこのように作ります。

<a href="#a">テキスト文1</a>
<a name="a">テキスト文2</a>

次に文章３から文章４へのリンクを作る際、aの部分をbに変えて

<a href="#ｂ">テキスト文3</a>
<a name="ｂ">テキスト文4</a>

このように作ります。
そうすることで、「テキスト文1とテキスト文2」、「テキスト文3とテキスト文4」がそれぞれリンクとして繋がりページ内リンクとして機能するはずです。

目次のリンク設置はプラグインを使った方が簡単に作成できる

今回紹介するプラグインは「 Easy Table of Contents 」。

これは目次リンクを自動で作ってくれるモノです。
各見出しがリンク先となり、「最初の大見出し」の上に目次としてまとめてリンク元を表示してくれます。
もしあなたが見出しそのものをリンクにしたいなら、このプラグインを使うべきと言えるでしょう。

ここではEasy Table of Contentsの設定方法と具体的な使い方について書いていきます。

Easy Table of Contents の設定方法

まず初めに、 Easy Table of Contents を新規追加しましょう 。
ダッシュボード上のプラグイン→新規追加を選択し、 Easy Table of Contents と検索しましょう。そして「今すぐインストール」をクリック。そのまま有効化してください。

次に、設定→目次を選択します。
ここで以下のように設定してください

１,「サポートを有効化」の「投稿」にチェックを付ける
２,「表示条件」を「１つ以上見出しがあるとき」にする
３,「見出しラベルを表示」の「目次の上に見出しテキストを表示します」にチェックを付ける

最後に「変更を保存」をクリックしたら変更は完了です。

その後は記事を作成すると自動で目次を作成してくれます。

さらに目次の作り方について詳しく知りたい方はこちらの記事も参考にしてみてください。

まとめ

今回はページ内リンクについて書いていきました。
内容をまとめると

• ページ内リンクは利便性を高めてくれるモノ
• 変に乱用したりリンク先とリンク元が近い時に利用したりすると逆効果
• リンクが飛ばないのはコードの仕組み、プラグインの設定がわかっていないから
• 見出しそのものをリンクにしたいなら Easy Table of Contentsを使う
• 見出し以外でリンクを作りたいならコードを使う

今回学んだ知識を生かして、最高のページを作り上げていってくださいね。