【Word Press】別ページの途中にリンクを飛ばす方法|アンカーリンク設置

2020年9月23日Wordpress

https://koalaworldtravel.com

Word Pressでは、アンカーリンクを使って簡単に【ブログ内の別ページの途中の指定の位置にリンクを飛ばす設定ができます。

ここで紹介するのは、ブロックエディターHTMLアンカーリンクを設定する方法です。

ジャンプ先ページの「見出し」にアンカーリンクを設置する

ここで紹介するのは、同じブログ内で飛ばしたい先のページの途中にある記事の「見出し」部分にアンカーリンクを設置する方法です。

見出し部分とは、H2・H3・H4などで設定する、記事内の段落のタイトルの部分。

まず、飛ばしたい先の記事の任意の段落タイトル【H2・H3・H4】をクリックして、設定のところからHTMLアンカーの入力欄を出します。

ここで飛ばしたいリンク先(読者に飛んで読んでもらいたいページの箇所)は、
赤色で囲んだH3見出し以下の文章だよ↓↓↓

それでは、H3見出し「生搾りオレンジジュース【Zumo de Naranja】」という見出しタイトルHTMLアンカーを設置するよ。

まずはH3見出しタイトルをクリックしてね

それから、ブロックエディタ編集画面の右側(下や左の人もいる)に出てくる設定画面から、
「高度な設定」をクリックするよ

「高度な設定」の下に「HTMLアンカー」が出てきたら、入力欄に好きな文字列を入力してね。

これは、自分だけの合言葉みたいなもの。

例えば、ココでは「orange-juice」って入力してみたよ。

これで、リンク先(ジャンプして読ませたい先=受け側の記事)アンカーリンク設置は完了です。

次に、リンク元(最初に読者が読んでいるページの箇所=飛び立つ側)アンカーリンク設定をしていきましょう↓

ジャンプ元ページの「任意の文字列」にアンカーリンクを設置する

①ジャンプ元のページの任意の箇所(ジャンプ元にしたい単語文章)をマウスで選択したら

②編集画面上の「リンク」マークをクリックするよ

③マウスで選択したワードの下に、リンク設定の入力欄がでてきたら

④リンク設定の欄に、ジャンプ先の記事のurlと、さっきジャンプ先として設定した見出しのHTMLアンカーの文字列前に#をつけて入力します

https://koalaworldtravel.com/spain-drinks/#orange-juice
(黄色ラインの部分が記事のurlで、その後ろにを入れてHTMLアンカー文字列を続ける)

「このリンクを追加するにはEnterを・・・」と出てきたらリンクurlをクリックするかEnterをクリックしてね。

これでアンカーリンク設定の完了だよ

最後に、「新しいタブを開く」のボタンをONにしておくことをオススメするよ。

「新しいタブで開く」設定をしておくと、読者はもともと読んでいたページを開いたまま、新しいタブからジャンプ先の記事に飛ぶことができるよ

アンカーリンクの動作確認する

アンカーリンクの設置が完了したら、ジャンプ元の文字列を自分でクリックして、
ちゃんと自分が設定した別ページの途中記事に飛ぶか確認してみてね

この記事で使ったリンク元とリンク先の記事の紹介

リンク元はこちら↓

リンク先はこちら↓