広告

ブロックエディタで内部リンク・ページジャンプを作る2ステップ

2022年5月11日

ブロックエディタで内部リンク・ページジャンプを作る方法は以下のとおり。

HTMLアンカーへのテキストリンク設置イメージ↓

page-link-sakusei
page-link-sakusei

ページ内リンク(ページジャンプ)とは

ページジャンプとは、テキストリンクをクリックして任意のコンテンツまでジャンプさせるリンクのこと。

page-link-01
page-link-01
page-link-02
page-link-02

参考:https://ja.wordpress.org/support/article/page-jumps/

ブロックエディタで内部リンク手順1. 内部リンクの着地(ジャンプ)先にHTMLアンカーを設置する

まずは、内部リンクの着地先へHTMLアンカーを設置する。

page-link-02
ジャンプの着地先イメージ

ジャンプ先に目印をつけた方が作業がラク。

例として、以下見出しタグへHTMLアンカーを設置していく。

page-link-step00
HTMLアンカーを設置する見出しタグ

設置先の見出しタグを選択し「高度な設定」>「HTMLアンカー」を選択。

page-link-step01
HTMLアンカー選択のイメージ

HTMLアンカー箇所に「STEP1」と入力。

page-link-step01-1

アンカーは半角英数で付与してくれ。基本は英数だな

HTML アンカー構文 使い方

  • HTML アンカーは文書内で固有であること (同一のアンカーは一度だけ使える)。
  • HTML アンカーでは大文字と小文字が区別される。
  • HTML アンカーには、ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができる。ただしスペースを含めることはできない
  • HTML アンカーの先頭はアルファベット必須

↑TOPへ戻る

ブロックエディタで内部リンク手順2. クリックさせる文言にリンクを付与する

クリックさせる文言に、HTMLアンカーへジャンプさせるリンクを付与する。

page-link-01
クリックさせる文言

見出しタグ(STEP1)へ ジャンプさせるリンクのことだ。

ここでは以下文言に、HTMLアンカー(STEP1)へジャンプさせるリンクを作成・付与する。

page-link-step02
HTMLアンカー付与対象テキスト

リンクさせたいテキスト範囲を選択する。

page-link-step02-1
テキストを選択するイメージ

「鎖アイコン(リンクアイコン)」をクリックして、URL入力窓を開く。

page-link-step02-2

ここ超重要

窓に「ハッシュ (#) 半角記号で始まる文字」を入力する。ここでは

  1. アンカーがSTEP1なのでリンクは「#STEP1」と設定
  2. 地球アイコンのブロックをクリックしてリンクを設定した。
page-link-step02-3
リンクを打ち込むイメージ

たとえば important-notice  という名前のアンカーを作成した場合、リンク先は  #important-notice  にします。

https://ja.wordpress.org/support/article/page-jumps/

以下のようにリンクが設置できればOK↓

page-link-step02-4
リンク設置のイメージ

クリックするとHTMLアンカーを設置した見出しタグへジャンプするぜ

HTMLアンカーリンクの設置GIF

手順2をGIFで↓

page-link-sakusei
手順2のリンク設置GIF

↑TOPへ戻る

ブロックエディタで内部リンク手順おさらい

ブロックエディタで内部リンクを設定する手順をおさらい。

上記リンククリックしてもらえれば、すぐに任意コンテンツへジャンプできるぜ

ブロックエディタ登場で内部リンク設定はめちゃ簡単になった

ブロックエディタの内部リンク設定、めっちゃ簡単にできるようになったと思う。

id属性などの前知識がなくても実装できるし、何より公式できちんと案内しているところが易しい。

ページジャンプとは、アンカーリンクとも呼ばれることがあり、リンクをクリックするとすぐに長いページの上や下のどこかに移動することです。これを有効にするには、ページ内にヘッダーの HTML アンカー属性を設置し、アンカーにジャンプするリンクを作成します。他のページのアンカーにジャンプすることができます。

ページジャンプ
OYAKUN
OYAKUN
とはいえHTML編集スキルがあることで、より使いこなせますよ。