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

こんにちは。Takezoです。

今回は、同じページで任意の場所へ飛ばす(リンクを張る)方法を解説します。

ページ内リンクは超簡単です！！
プラグインは使用しません。

また、ページ内リンクが飛ばないなど、うまくいかなかった時の対処方法も解説します。

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

 この記事の信頼性

システムエンジニアの私が、実際に試した(体験した)内容を記述し、重要な部分を含めて解説しています！

 当ブログの運営環境

設定方法

１．リンク元の設定

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

そして、リンク元(離陸地点)の文字を選択します。

次にリンクボタンをクリックします。

下記の表示になりますので、
「#任意の文字」を入力し、適用をクリックします。

※下の画像は例として、#test としています。

２．リンク先の設定

飛ばしたい記事の位置(着陸地点)をクリックします。
その位置に、カーソルがとどまって点滅します。

ワードプレス投稿画面のツールバーから【挿入】→「アンカー」をクリックします。
アンカーのID入力画面が表示されるので、「1.」で入力した#を除いた任意の文字を入力します。

ここでは、test

【テキスト】タブでHTMLコードを見てみると、リンク先の部分は下記のようになっています。

「<a id=“test”></a>」
※testの部分が任意の文字です。

３．設定完了

完了です。
プレビュー画面で確認してみましょう。

内部リンクのテスト

・「最上部へ飛ぶ」ここをリンクさせます！

※上のリンクをクリックすると、最上部へ飛びます。

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

正常な記述例

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

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

※ページ内リンクが飛ばない時は？

リンクできない！
リンクがうまくいかない！

そんな時に確認してみることは？

確認する部分

ワードプレスの【テキスト】タブで、HTMLコードを確認します。

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

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

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

一つの”(ダブルコーテーション、しかも半角で)で、文字を囲みます。

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

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

「<a href=""#test"">最上部へ飛ぶ</a>」ここをリンクさせます！
　↑　【ダブルコーテーションがダブっているのがNG】

#の付け方

飛んで行った先（着陸地点）の記述には、「#」は付けないこと。

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

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

最後に

どうでしたか？

うまくいきましたか？

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

超実践型プログラミングスクール

ブログを始める【３つ】の理由とは！？