【ブロックエディター】HTMLアンカーで簡単ページ内リンク作成方法

WordPressブログを見ていると目次から任意の場所にジャンプすることが出来て便利ですが

長い記事になってくると任意の場所へ戻るのって面倒くさいですよね。

試しにジャンプしてみる

ジャーーーンプ！！！(ジャンプ元)

ページ内リンクの作り方

元に戻る

リターーーン！！！(ジャンプ先)

それでは本題に入ります。

この記事ではジャンプ元をジャーーーンプ！！

ジャンプ先をリターーーン！！として説明します。

ジャンプ先にアンカーを設定する

ジャンプ元にリンクを貼り付ける

通常のリンク作成ではサイトアドレスを入力しますがページ内リンクの場合は

#の後にHTMLアンカーを入力します。

#HTMLアンカー

HTMLアンカーのルール

HTMLアンカーにはいくつかルールがあります。

参考に

HTMLアンカーは、ドキュメント内で一意である必要があります。

HTMLアンカーでは大文字と小文字が区別されます。

HTMLアンカーには、ハイフン（-）、アンダースコア（_）、コロン（:)、ピリオド（。）の記号を含めることができます。スペースを含めることはできません。

HTMLアンカーはアルファベットで始める必要があります。

WordPressサポートページより

別記事の特定のブロックへのリンクを作る方法

ここまでページ内リンクの説明をしてきましたが

同じサイト内の別記事の特定のブロックへのリンクを作ることも出来ます。

ページ内リンクでは　＃HTMLアンカー　でしたが

別記事の場合は　記事のアドレス＃HTMLアンカー　にすればOKです。

こんな感じでリンクを貼り付ける

https://tomotomo-life.com/blog-swell-how-to-affiliates-on-twitter/#modoru

まとめ

ページ内リンクは記事を見やすくするという観点で

SEO的にも有利だと思うので是非とも活用して下さい！