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

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

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

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

リンク元（スタート地点）の設定

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

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

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

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

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

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

タグを直接入力する方法

<a href="#①">②</a>

リンク先（ゴール地点）の設定

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

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

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

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

コードは以下。

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

タグを直接入力する方法

<a id="①"></a>②

見出し部分をリンク先に設定する方法

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

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

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

ただし、見出し２を目次で利用しているとアンカーがうまく動作しないときがあるので、その場合は見出し２をリンク先に設定するのはやめたほうがよいです。

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

リンク元（スタート地点）の設定

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

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

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

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

コードは以下のとおり。

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

タグを直接入力する方法

<a href="①/#②">③</a>

リンク先（ゴール地点）の設定

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

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

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

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

コードは以下。

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

タグを直接入力する方法

<a id="①"></a>②