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

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

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

こちらは「クラシックエディター」を使った設定方法です。
「ブロックエディター(Gutenberg)」での設定方法は別記事があります。(↓)

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

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

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

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

「アンカー」をクリックします。

入力欄に任意の英数字を入力します。
(ここは「a」でも「abc」でも、何でも構いません。)

コードは以下。

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

タグを直接入力する方法

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

①→リンク先ID(任意の英数字)
②→リンク元(任意の文字列)※「ここまでジャンプする」など

スポンサーリンク

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

次に、文字列でスタート地点を設定します。
(※ボタンなどでもOK。)

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

「リンクの挿入/編集」を押します。

先ほどリンク先に設定した「a」(任意の英数字)を、リンク元として「#」のあとに入力します。

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

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

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

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

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

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

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

スポンサーリンク

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

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

リンク先の設定方法は、ページ内でジャンプさせるときと同じです。

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

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

「アンカー」を押します。

入力欄に任意の英数字を入力します。

テキストエディタでのコードは以下。

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

リンク先に見出しを利用する方法は、ページ内にジャンプさせる場合と同じです。
『見出し部分をリンク先に設定する方法』にもどる↑↑

スポンサーリンク

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

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

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

「リンクの挿入/編集」を押します。

「リンク先ページのURL」と「#a」を入力し、決定を押します。

コードは以下のとおり。

<a href="https://fukappa.work/test/#a">ここから別のページにジャンプする</a>
タイトルとURLをコピーしました