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

(スポンサーリンク)

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

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

目次以外で記事内の特定の場所へジャンプ出来ないのかしら

別記事の特定の場所にジャンプ出来るようにリンクが作れないかなぁ

こんな悩み
  • 同じ記事の特定の場所にジャンプ出来るようにリンクを作りたい
  • 自分のサイト内で別記事の特定の場所にリンクを作りたい
ともとも

大丈夫!ブロックエディターのHTMLアンカーで簡単にリンクを作れますよ。

この記事の内容
  • 記事内の特定のブロックへリンクを作る方法
  • サイト内の別記事の特定のブロックへリンクを作る方法

試しにジャンプしてみる

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

ともとも

この記事はWordPressテーマ
SWELLを使用して作成しています!

(スポンサーリンク)

目次

ページ内リンクの作り方

元に戻る

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

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

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

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

ジャンプ元
ジャンプ先
  • ジャーーーンプ!!!(ジャンプ元)
  • リターーーン!!!(ジャンプ先)

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

STEP
HTMLアンカーを配置する

まずはジャンプしたい目的地のブロックを選択します。

STEP
画面右のツールバーを下にスクロール
高度な設定をクリック
STEP
HTMLアンカーに名前を付ける
STEP
完了

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

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

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

#HTMLアンカー

STEP
ジャンプ元をなぞって
リンクボタンをクリック
STEP
ジャンプ先のアンカーを入力して
リターンをクリック

# を忘れずに!

STEP
完了

HTMLアンカーのルール

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

HTMLアンカーのルール
  • 先頭の文字は必ずアルファベット
  • スペースは使えない
  • 呼び出す場合は#HTMLアンカー

参考に

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

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

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

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

WordPressサポートページより

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

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

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

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

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

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

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

まとめ

記事内リンクは

#HTMLアンカー

別記事リンクは

別記事アドレス#HTMLアンカー

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

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

ともとも

この記事はWordPressテーマ
SWELLを使用して作成しました!

(スポンサーリンク)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる