内部リンクの設定方法

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

悩む人のイラスト

WordPressで目次のようにページ内の文章にジャンプさせたいんだけど、どうすればいいの?
飛ばない時の対処方法も教えて!

その質問にお答えします

投稿者のイラスト

この記事では、ワードプレス(WordPress)のクラシックエディターで、ページ内リンクのやり方を解説しています。

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

ブロックエディター(Gutenberg)での設定手順】はこちら

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

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

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

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

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

この記事の内容

  • ページ内リンクの設定手順
  • リンクが飛ばない時の対処法

ブロックエディター(Gutenberg)での設定手順】はコチラ↓

この記事の信頼性

元SEが実際に試した内容を、重要なポイントを含めながら解説しています。

— プロフィール —

当サイトの運営環境

レンタルサーバー

【ロリポップ!サーバー】

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

投稿者のイラスト

早速始めましょう!

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

内部リンクの設定手順

  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>」ここをリンクさせます!
 ↑ 【ここがリンク表示になり、着陸地点へ飛びます】

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

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

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

1つの『”』(半角のダブルクォーテーション)で文字を囲みます。

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

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

もう一度、確認しましょう!

  • ダブルクォーテーション(”)がダブっていませんか?
  • ダブルクォーテーション(”)が【半角】で入力されていますか?

ダブルクォーテーション(”)は
半角」ですよ!

特に、テキストデータをコピペした時は注意です。
変な文字に変換される場合があります。

自分はここで引っかかりました(^◇^;)

確認②-『#』の付け方

【アンカーの挿入】時のID名(着陸地点)には、「#(ハッシュ)」を付けないこと。

手順①:アンカーの挿入

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

今だと(ハッシュタグ)ですね。
私のような古いSEは『井桁(いげた)』と言ってしまいます^^;

★NGな例★

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

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

もう一度、確認しましょう!

  • リンク元のテキストに『#ハッシュ』を半角で付ける
  • リンク先の(ID名)には『#ハッシュ』を付けない
喜ぶ人のイラスト

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

投稿者のイラスト

そうなんです!
【リンクの挿入】の時に『#ハッシュ』をつけましょう!

最終確認をしてみましょう!

  • ダブルクォーテーション(”)がダブっていませんか?
  • ダブルクォーテーション(”)が【半角】で入力されていますか?
  • リンク元のテキストに『#ハッシュ』を半角で付けていますか?
  • リンク先の(ID名)には『#ハッシュ』を付けないように!

うまくいきましたか?

『なんかよくわからないんだけど。』

という方は【お問い合わせ】からお悩みをお知らせください^^

ブロックエディター(Gutenberg)で内部リンクを設定する手順はコチラで解説しています。

3年間で1万人が学んだプログラミングスクールTECH::CAMPのオンライン説明会 未経験から4ヶ月で副業デザイナーを目指しませんか?【SHElikes】デザイナー転職

【3】最後に

オンラインストレージ(クラウドストレージ)
って知っていますか?

『オンラインストレージ(クラウドストレージ)を使う理由』は↓↓↓

オンラインストレージを使って出来ること

◯ファイルの受け渡しが簡単

  • 社内・外の複数のメンバーと共同作業
  • 学校の友達とレポートの受け渡し
  • 外出先でもスマホで閲覧、受け渡し
  • マルウェアEmotet対策
    感染の確認方法と対策

◯PCデータのバックアップ

あなたはブログの画像や動画などの大切なデータをどこにバックアップしていますか?

SDカード?

外付けハードディスク?

オンラインストレージは、PC内の大切なデータのバックアップとしても機能しますので、リスク回避としてぜひ導入してみて下さい。

詳細は【Q.】Xserver Driveってなにが出来るの?をご覧ください。

2022年10月 追記

ロリポップ!のownCloud簡単インストールは2022年7月6日に利用停止となりました。
理由は「ownCloudの開発が停止しているため」との事です。
ロリポップ!サーバーで提供されていたオンラインストレージは、無料だし、レンタルサーバーの空き容量を利用でき、すごく便利だったので残念です^^;

現在は『エックスサーバードライブ』というクラウドストレージ(オンラインストレージ)を利用しています。

機能や使い方がほとんど一緒なので使い易いです。

2GBのストレージ(容量が少ないけど)は無料なので、試したい時は2GBプランで使ってみてください。なにせ無料なので^^

お困り事はありませんか?

無料相談を承ります。

気軽にコチラから【お問い合わせ】ください。

内部リンクの設定方法
最新情報をチェックしよう!