【ブロックエディター】記事内の移動をスムーズに！HTMLアンカーを設置する方法！

長い記事を読むのが大変！と感じた事はないでしょうか？

せっかく良い情報が載っていても、長い記事だとスクロールするのが辛くなり、読者が離脱してしまう可能性があります。

HTMLアンカーを使えば、ページ内の見たい箇所に一瞬で移動することが可能。

記事が読みやすくなり、ユーザビリティーを上げられます。

今回はブロックエディターで「HTMLアンカーを設置する方法」について解説していきます。

ほぼコピペとクリックだけで簡単に設置できるので、ぜひ挑戦してみてください。

この記事でわかること

HTMLアンカーとは？

目次のように、ページ内で見たい情報がある箇所に移動できる機能です。

従来はHTMLを記述し、aタグを使ってHTMLアンカーを作っていました。

テキストリンクになる部分：<a href="#midashi1">見出し1へ移動</a>

移動先：<a name="midashi1">見出し1</a>

これだと手間がかかり、記事を作るのが大変です。

ブロックエディターではHTMLを記述する必要がなくなり、初心者の方でも簡単に設置できるようになりました。

長い記事の場合に、読者の離脱を防げるというメリットがあります。

「求めている情報がどこにあるのか」わからなくなってしまうと、ページ離脱をされてしまう恐れがあり、再訪問の可能性も低くなってしまいます。

HTMLアンカーを使えば、記事の途中でも見たい情報がある箇所に移動できるため、読者の読みづらいといった状況を解消できます。

ブロックエディターでは、好きなテキストリンクから、好きなブロックへ移動ができます。

リストからボックスやテーブル、段落のテキストリンクから見出しなど。

今回はリストから見出しに移動する手順を解説します。

どのブロックに移動させる場合もやり方は同じなので、お好みで変更してみてください。

HTMLアンカーの設置方法

STEP1
移動先の見出しを作る
まず移動先となる見出しを作ります。
STEP2
高度な設定からHTMLアンカーを指定する
見出しを選択して、右側ブロックメニューの「高度な設定」からHTMLアンカーを指定。
ここが上記で説明したaタグの「#」以降の文字列です。
<a href="#見出し1">
見出し1～3まで、それぞれ見出しのタイトルを入力すればOK。
STEP3
テキストリンクを作成
次にリンク元となるリストを作ります。
リスト作成後、テキストを選択し、リンクボタン、または「Ctrl+K」でURLを指定。
先頭に「#」を付けて、先ほどHTMLアンカーに指定した、見出しのタイトルを入力します。
STEP4
HTMLアンカー設置完了
これでHTMLアンカーの設置は完了です。
プレビューなどでちゃんと移動できるか、確認してみてください。