ブロックエディタの高度な設定! 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 アンカー機能を使用して設定しました。その設定方法は以下のとおりです。

HTML アンカーの設定方法
HTML アンカーの使い方
  1. ジャンプ元の『 HTML アンカー』に任意の文字列(アルファベット)を入力
  2. ジャンプ先に『 # + 設定した任意の文字列 』を入力

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

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

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

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

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

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

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

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

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

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

役に立った!と思ったら他の人にシェアしよう
  • URLをコピーしました!

記事の内容についてご意見をお聞かせください

コメントする

このコメントを送信することにより、当サイトの個人情報保護方針に同意したことになります。

タップできる目次