new いっちゃんの日本画ページが出来ました!!

WordPress外部・内部ページの特定箇所にリンクを貼る

WordPress外部,内部ページの特定の場所へのリンクの貼り方を書きます。

 

こんにちは。

いっちゃんです。(@hi_icchan_jp)

 

WordPressのブログに慣れてくるとページの特定の場所にリンクを飛ばしたくなりますよね。

 

今日はWordPressブログの特定の場所にリンクを貼る方法をお教えします。

 

WordPress外部、内部ページの特定の場所にリンクを貼る

WordPress外部、内部ページの特定の場所にリンクを張る方法です。

WordPress内部ページの特定の場所にリンクを貼る方法

WordPress内部ページの特定の場所にリンクする方法書きます。

 

【前提条件】WordPressのテキストエディタとビジュアルエディターを併用し、リンク先を指定してリンクを貼ります。

 

※用語解説:私も間違えやすいので用語を以下に解説します。

  • リンク元:リンクを貼る起点 :アンカーにリンクを貼る
  • リンク先:ジャンプする終点 :アンカーを設置する

 

リンク元にテキストエディタで任意のIDを指定します。

結論:方法はリンクするテキストを選択し、リンク挿入ボタンを押します。

 

任意のIDを入れて青の適用ボタンを押します。

例:#icchan

 

WordPressテキストエディターでアンカーを指定する

結論:方法は以下です。

  • アンカーを飛ばしたい場所を決めます。
  • WordPressページ内のリンク先(終点)を決める

 

Tiny MCE Advanceを使ってない方は下記の画像の②③④⑤を参照ください。

WordPressのTinyMCE Advanced使ってる方

結論:方法は以下です。

 

WordPressのビジュアルエディターでリンク先(終点)の文章を選択して、アンカーを選択します。

 

リンク先にアンカーを貼る

アンカーを貼る

 

WordPressのページでアンカーを押したら、IDのところに、自分で決めた任意のIDを入力してOKを押します。

 

アンカー

アンカー

 

WordPressの文章ので囲っている部分がアンカーを設置した印=リンク先(終点)にジャンプするようになります。

 

WordPressのTiny MCE Advanceを使ってない方(上記の方法がうまくいかない方)

結論:方法は以下です。

  1. WordPressのリンク先(終点)を投稿編集テキストエディタで開く。
  2. WordPressのテキストエディタリンク先(終点)を指定する。
  • <h2>タグの中に任意のIDを入力します。</h2>
  • <p>リンク先が文章の場合はタグの中に任意のID</p>

 

※注意:便宜上画像の画面はビジュアルエディタのままになってます。

 

実際にカスタマイズするときはWordPressのテキストエディターに切り替えて下さいね。

 

WordPressの内部リンク

内部リンク

 

<h2>リンク先(終点)の文章。</h2>

         ↓

<h2 id=”icchan”>リンク先(終点)の文章</h2>

  • リンクを貼る:リンクしたい文章=リンク元(起点)の文章を選択
  • ③リンクマークを選択する
  • ④ ♯(シャープ)任意のIDを入力する(リンク元の文章)
  • ⑤ 確定を押す。

 

WordPressの外部ページの特定箇所にリンクを張る方法

WordPress外部ページの特定の箇所にリンクを貼る方法を書きます。

 

WordPressの外部ページのリンク先(終点)を決を決めて、リンクを貼ります。

 

上記で説明したWordPressのTinyMCE Advanced使ってる方、TinyMCE Advanced使ってない方のアンカーの設置と同じです。

 

アンカーを設置するリンク先の終点♯無しの任意のIDを入力します。

 

外部ページにリンクを飛ばす方法は、WordPressの内部ページへ飛ばす方法と少し異なります。

 

WordPressの外部ページにリンクを飛ばす方法は以下です。

外部の特定ページにリンクを貼る方法

リンクを貼りたい文章

 

リンクを貼るリンク元(起点)の文章を選択し、リンク挿入ボタンを押す。

 

記載例拡大は以下です。

 

https://hanasiaite1.com#icchan

 

ジャンプさせたいページのurl#任意のIDを入力→確定

上記でリンク先(終点)ページへのリンクが出来上がりです。

 

早速、WordPressページのリンク先にジャンプできるか試してみましょう。

 

WordPressの記事はコツコツ書いていきます。最後まで読んでいただいてありがとうございました。

タイトルとURLをコピーしました