ブロックエディタの高度な設定！ HTML アンカー使い方

ブロックエディタには、[ 高度な設定 ] の項目に『 HTML アンカー』という機能があり、コード知識を必要とすることなくページ内ジャンプ（リンク）を設定することができます。

この記事では、 HTML アンカー機能を利用したページ内ジャンプ（リンク）の設定方法を解説します。

ページ内ジャンプ（リンク）の概要について詳しく知りたい方は、こちらの “ページ内ジャンプ（リンク）の設定方法【 HTML でスクロールを飛ばす】” をご覧ください。

HTML アンカーとは？

HTML アンカーは、 Mozilla では以下のように定義されています。

HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 <a> の内容は、リンク先を示すものであるべきです。

MDN Web Docs『<a>: アンカー要素 – HTML: HyperText Markup Language | MDN』

HTML アンカーとは、簡単にいうとページ内や他の URL へジャンプすることができる<a>タグのこと。

<a href>◯◯</a>

として使われますが、ブロックエディタでは HTML アンカーをノーコードで設定することができます。

具体的な設定方法は以下の通りです。

HTML アンカーの設定方法

まずここをクリックしてみてください。
※ページの先の方に飛びます

おかえりなさい。

さて、ページ内ジャンプ（リンク）で設定した任意の場所へ飛んでまた戻ってきたわけですが、あなたが今経験したページ内ジャンプ（リンク）には一切コードを入力していません。

ブロックエディタの HTML アンカー機能を使用して設定しました。その設定方法は以下のとおりです。

クラシックエディタでは、『 id = “任意の文字列” 』と HTML で入力する必要がありましたが、ブロックエディタではたったのこれだけでページ内リンクを設定できます。

もし別のページの任意の場所にジャンプしたい場合は、2を『 ジャンプ先のページ URL / # ＋ 設定した任意の文字列 』とするだけ。

例：https://chiyo-blog.com/○○（パーマリンク）/ #□□（任意の文字列）

複雑な操作はないので、慣れてしまえばとても簡単ですよね！

ブロックエディタならコード知識がほとんど必要ない

WordPress のブロックエディタなら、クラシックエディタで必要だったコード知識や技術がほとんど不要になります。そのため、ブログ・アフィリエイト始めたての初心者でも操作しやすい。

HTML アンカーをうまく活用すれば 、 SEO にもユーザーにも良い記事を作成することができることはもちろん、目次を手動で作ることも可能。

なんでもかんでも機能を使えばいいわけではありませんが、今回紹介した HTML アンカーをぜひ活用してみてくださいね。

ここまで飛びました。
※冒頭のリンクから飛ぶ設定になっています。

ここをクリックして、元の場所に戻ってみましょう。