注目キーワード
  1. サイト開設手順

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

こんにちは。
たけちんです^^

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

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

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

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

 

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

 

 この記事の信頼性

 

システムエンジニアが実際に試した(体験した)内容を記述し、重要な部分を含めて解説しています!
★プロフィール★

 

 当ブログの運営環境

 

内部リンクを3分で設定する方法

 

たけちん
では早速はじめましょう!

 

【1】リンク元の設定

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

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

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

WordPress 内部リンク設定方法
リンクボタンをクリック

 

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

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

 

WordPress 内部リンク設定方法
リンク元の設定

【2】リンク先の設定

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

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

ここでは、test

 

 

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

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

 

【3】設定完了

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

 

内部リンクのテスト

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

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

 

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

正常な記述例

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

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

 

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

たけちん
HTMLコードを直接入力した場合、リンクをクリックしても飛ばない時があります。
そんな時は、以下を試してみてください!

 

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

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

【 確認する部分 】

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

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

 

たけちん
詳細をみていきましょう!

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

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

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

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

 

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

 

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

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

 

・ダブルコーテーション(”)がダブっていないか?
・ダブルコーテーション(”)が半角で入力されているか?

 

②「#」の付け方

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

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

 

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

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

 

c-nyanzo-001
ニャンぞー
リンク先(飛んだ先の着陸地点)のID名には
#はいらないんですね(=^ェ^=)
たけちん
リンク元(飛ばす元の離陸地点)には
#をつけるんじゃよ!
・リンク元のテキストに(#)を半角で付ける
・リンク先の(ID名)には(#)を付けない

 

再確認してみましょう

・ダブルコーテーション(”)がダブっていないか?
・ダブルコーテーション(”)が半角で入力されているか?
・リンク元のテキストに(#)を半角で付ける
・リンク先の(ID名)には(#)を付けない

 

最後に

たけちん
どうでしたか?
うまくいきましたか?

 

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

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

 

関連記事

・この記事を読むと 自分のブログ記事内から、他の記事へリンクさせる方法が分かります。【動画解説あり】 他のページへ飛ばしたい時に使用します。 この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています!   &[…]

WordPress アイキャッチ画像

TKCオフィス仙台

wordpress(ワードプレス)テーマのザ・トール(THE THOR)を、ワードプレスにインストールする方法(手順)を…

TKCオフィス仙台

今回は、wordpress(ワードプレス)テーマのザ・トール(THE THOR)で、デザイン着せ替え機能によるデモデザイ…

 

WordPress アイキャッチ画像-内部リンク表示
最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

たった一度の購入で複数サイトに利用できる
コスパ最高のワードプレス・テーマです^^
当サイトは「THE THOR」ザ・トールを利用して運営しています。

CTR IMG