WordPress アイキャッチ画像-内部リンク表示

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

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

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

 この記事の内容

  • 内部リンクの方法
  • リンクが飛ばない時の対処方法
こんにちは!

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

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

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

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

    など

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

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

 この記事の信頼性

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

★プロフィール★

 当サイトの運営環境

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

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

【YouTube動画】

内部リンクの設定方法

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

設定手順は以下の通りです。

 内部リンクの設定手順

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

手順①-リンク先の設定

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

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

内部リンクの設定手順
【画像はタップ・クリックで拡大します】

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

内部リンクの設定手順2
【画像はタップ・クリックで拡大します】

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

内部リンクの設定手順3
【画像はタップ・クリックで拡大します】
たけちん
アンカーのID名に「#」は付けませんので注意です!

手順②-リンク元の設定

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

内部リンクの設定手順4
【画像はタップ・クリックで拡大します】

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

内部リンクの設定手順5
【画像はタップ・クリックで拡大します】
たけちん
この【リンクの挿入】では「#」を付けましょう!

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

内部リンクの設定手順6
【画像はタップ・クリックで拡大します】

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

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

内部リンクの設定手順7

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

内部リンクの設定手順8
【画像はタップ・クリックで拡大します】

❸ リンク先に飛びます。

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

内部リンクの設定手順9
【画像はタップ・クリックで拡大します】

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

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

悩む人のイラスト
リンクが飛ばないんだけど。。。
たけちん
はい。
飛ばない時は下記の「確認する部分」を確認してくださいね!

【確認する部分】

  1. ダブルコーテーション
  2. 「#」の付け方
たけちん
詳細をみていきましょう!

 正常な場合の記述内容

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

内部リンクの設定手順_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名)には(#)を付けない
喜ぶ人のイラスト
アンカーを挿入する「ID名」には
「#」はいらないんですね!
たけちん
そうですね。
【リンクの挿入】の時に「#」をつけましょう!

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

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

【3】最後に

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

「なんかよく分からない」時はコチラ!

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



たけちん
★無料サポート引き受けます★

【★ブログを始める前も始めた後も、無料サポート致します!★】

  • 分からないこと
  • 不安なこと
  • 心配なこと
  • 頼みたいこと

    などなど。

★まずは、お気軽にお問い合わせください!★

お問い合わせの詳細はコチラから!

【無料サポートを引き受ける理由はコチラ】

WordPress アイキャッチ画像-内部リンク表示
最新情報をチェックしよう!
>大切なデータが突然消えた...( ̄O ̄;)

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験をした方は少なくないはず。

さぁ、ownCloudでデータを二重化しときましょう!
実際に0円で導入し、運用しています。
→ 無料お問い合わせはコチラから

TKCオフィス仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト・ブログ開設の無料相談はコチラから

CTR IMG