ページの好きな場所にジャンプさせる方法【アンカー】

WordPress

ページの閲覧がページ内の特定の場所にジャンプできるようにする方法です。

テキストエディター画面でタグを直接書き込む方法も記載してありますが、
設定にはプラグイン(『TinyMCE Advanced』)を利用するのがおススメ(簡単)です。

ページ内の特定の場所にジャンプさせる方法

  以下は「ビジュアルエディター」内での操作です。

リンク元(スタート地点)の設定

文字列でスタート地点をつくっておきます。
(※ボタンなどでもOK)

文字列をドラッグして選択。

『リンクの挿入/編集』を押します。

『#』のあとにリンク先のID(任意の英数字)を入力し、決定を押します。
(※英数字は『a』でも『abc』でも、何でも構わない。)

テキストエディターでのコードは以下のようになります。

<a href="#a">ここからジャンプする↓↓</a>

タグを直接入力する方法

<a href="#①">②</a>
①→リンク先ID(任意の英数字)
②→リンク元(任意の文字列)※「ここからジャンプする↓↓」など

リンク先(ゴール地点)の設定

文字列でゴール地点をつくります。

文字列をドラッグして選択。

『アンカー』を押します。

先ほど設定した『a』を入力し、『OK』を押して完了です。
注意:ここでは『#』を入力してはいけない。

コードは以下。

<a id="a"></a>ここまでジャンプする

タグを直接入力する方法

<a id="①"></a>②
①→リンク先ID(任意の英数字)
②→リンク元(任意の文字列)※「ここまでジャンプする」など
テキストエディター画面で『a href=”#◯”』や『id=”◯”』などのタグを直接書き込む場合、『リンクの挿入/編集』や『アンカー』などのエディターメニューを利用する必要性は特にありません。

見出し部分をリンク先に設定する【一般的な利用方法】

文字列を使わず、既存の見出しをリンク先に設定することもできます。

headerタグに以下のとおり『id=”◯”』の部分を書き加えるだけ。

<h2 id="◯">見出し1</h2>

着地点を分かりやすくするために、見出しをリンク先に設定するのが一般的です。

別ページの特定の場所にジャンプさせる方法

リンク元(スタート地点)の設定

文字列でスタート地点をつくっておきます。
(※ボタンなどでもOK)

文字列をドラッグして選択。

『リンクの挿入/編集』を押します。

『リンク先ページのURL』と『#◯』を入力し、決定を押します。
(※『◯』は任意の英数字)

コードは以下のとおり。

<a href="https://fukappa.work/test/#a">ここから別のページにジャンプする</a>

タグを直接入力する方法

<a href="①/#②">③</a>
①→リンク先ページのURL
②→リンク先ID(任意の英数字)
③→リンク元(任意の文字列)※「ここから別のページにジャンプする」など

リンク先(ゴール地点)の設定

ここからの設定方法は、ページ内でジャンプさせる設定方法と同じです。

文字列でゴール地点をつくります。

文字列をドラッグして選択。

『アンカー』を押します。

先ほど設定したリンク先ID『a』を入力し、『OK』を押して完了です。
(※『#』は入力してはいけない。)

コードは以下。

<a id="a"></a>ここまでジャンプする

タグを直接入力する方法

<a id="①"></a>②
①→リンク先ID(任意の英数字)
②→リンク元(任意の文字列)※「別のページからここまでジャンプ」など
リンク先に見出しを利用する方法は、ページ内にジャンプさせる場合と同じです。→『リンク先に見出し部分を利用する場合』の設定方法の場所にもどる↑↑
タイトルとURLをコピーしました