たった3分！内部リンクを設定する方法【ページ内リンク編】

目次のように、同じページで大事な文章へジャンプさせたいんだけど、どうしたらいいんだろう？
やってみたけど、うまく飛ばないなぁ。。。

そのお悩みを解決します。

　この記事の内容

• 内部リンクの方法
• リンクが飛ばない時の対処方法

今回は、内部リンクのやり方をご紹介します。

wordpress(ワードプレス)で『同じページ内で、任意の場所へ飛ばす(リンクを張る)方法』です。

また、うまくいかなかった時の対処方法も解説します。

• リンクが飛ばない
• ページ内リンクが効かない
• アンカーリンクを設定しても飛ばない

  など

【リンク先に飛ばない】対処方法はこちら

参考になれば嬉しいです。

　この記事の信頼性

　当サイトの運営環境

「レンタルサーバーを最大限に安く契約する方法」はコチラ！

【1】内部リンクを設定する手順

　内部リンクの設定手順

1. リンク先の設定（着陸地点）
2. リンク元の設定（離陸地点）
3. プレビューで確認

手順①-リンク先の設定

❶ ワードプレス投稿画面の【ビジュアル】タブをクリックし、記事内容を表示させます。

そして、リンク先（着陸地点）の部分にカーソルを置きます。

❷ 【挿入】→【アンカー】をクリックします。

❸ アンカーIDを入力します。

手順②-リンク元の設定

❶ リンクさせる文字を選択して、【リンクの挿入】をクリックします。

❷ 入力項目に「#」を付けて、名称を入力し、【適用】をクリックします。

❸ 下記の画面になります。

手順③-プレビューで確認

❶ ワードプレスの右上【プレビュー】または【変更をプレビュー】をクリックします。

❷ リンク元をクリックしてみましょう。

❸ リンク先に飛びます。

（アンカーを挿入した部分が、上部にきます。）

投稿画像に枠をつける方法はコチラ

【2】内部リンクが飛ばない時の対処方法

リンクが飛ばないんだけど。。。

【確認する部分】

1. ダブルコーテーション
2. 「#」の付け方

　正常な場合の記述内容

・テキストモードにしてHTMLコードを見てみると、下記のようになります。

正常な記述例

【着陸地点の記述】
<a id="tyakuti"></a>
こんにちは！　←　【ここがページ最上部のところ（着陸地点）】

【離陸地点の記述】
「<a href="#tyakuti">最上部へ飛ぶ</a>」ここをリンクさせます！
　↑　【ここがリンク表示になり、着陸地点へ飛びます】

確認①-【”】ダブルコーテーションを確認

「”●●”」の記述部分で、「””●●””」（ダブルコーテーションがダブっている）となっている時があります。

このダブっているダブルコーテーションを削除してみましょう。

ダブルコーテーションは半角で記述します！

★NGな例★
<a id=""tyakuti""></a>
　↑　【ダブルコーテーションがダブっているのがNG】

<a href=""#tyakuti"">【ここをリンクさせる】</a>
　↑　【ダブルコーテーションがダブっているのがNG】

確認②-「#」の付け方

【アンカーの挿入】時のID名（着陸地点）には、「#」を付けないこと。

手順①：アンカーの挿入

ちなみに、間違えることはないと思いますが「♯」(シャープ)ではNGです。
パソコンのキーボードでいうと、[shift]+[3]です。
今だと(ハッシュタグ)ですね。

★NGな例★

<a id="#tyakuti"></a>
　↑　【リンク先のID名に#が付いている→NG】

「<a href="tyakuti">最上部へ飛ぶ</a>」ここをリンクさせます！
　↑　【リンク元に#が無い→NG】

アンカーを挿入する「ID名」には
「#」はいらないんですね！

　もう1度、確認してみましょう

【3】最後に

最初は難しいと思いますが、一度やってみれば超簡単なのでぜひチャレンジしてみてください^^

【無料オンライン説明会】
10秒で登録完了！TECH::CAMPオンライン説明会

【転職・起業支援】無料カウンセリングあり！
超実践型プログラミングスクール【.pro】