最新記事「シールで商品のポイントを訴求しよう」

ブログの記事内をリンクで移動させる方法(WordPressブロックエディタ編)

当サイトでは「アフィリエイト広告」を掲載している記事があります。

【広告表記について】

広告が掲載されている記事には「広告を含む記事です」と冒頭に表記しています。また記事内において、広告主の提供する宣伝素材やリンクを使用している主な個所では「PR」の表記を添えています。

【記事内容について】

消費者庁が問題としている「誇大な宣伝や表現」とならないよう配慮してコンテンツを制作しておりますので、ご安心ください。

問題のある表現などありましたらお問合せよりご一報いただけると幸いです。

>>お問合せフォーム

こんばんは、ヨフカシです。

ブログ記事を構成する上で、本題の前に「予備知識」や「事前の解説」が必要なことってありますよね?

読者に伝えておきたいことや、記事の流れとして挿入したい場合など、記事を作る側の事情で「前置き」を作るケースです。

しかし読者の中には前置きがいらない読者もいるかもしれません。

ブログなどネットで閲覧する記事は「結論を先に伝える」のがセオリーと言われています。それは本題に到達する前に余計なものがあると、ページから離脱されてしまう可能性があるからです。

そこで今回の記事は、離脱防止に役立つテクニックの紹介です。

「リンク」機能を活用して、記事内の目的の場所へスムーズに移動させる方法です。

こんな人に向けた内容

記事内でリンクを設定する方法がわからない

PR

「THE THOR」の制作会社「フィット株式会社」より
新しいWordPressテーマがリリース!

↓公式サイトをチェック↓

ブロックエディタ 100%完全対応WPテーマ「ゴールドブログ」

目次の項目をクリックして移動できます

どうしたらいい?記事内の「前置き」

だれかに何かを説明したり、伝えるとき、前置きが必要な場面があると思います。

対面で会話をしている状況なら、相手に「これ知ってる?」とか「この話したことあるよね?」と、確認することができます。そして前置きが必要がないのであればカットして本題から伝えるでしょう。

しかしブログなどWebに掲載している情報は一方通行になるため、状況に合わせて対応を変えることができません。

記事を書くときには、読者を想定した上で「必要かもしれない情報」を含めて記事を構成します。

例えば…

「前回の続き」として始まる記事の場合
→念のため「前回のあらすじ」を載せておく

「○○の使用方法」のような解説記事の場合
→「○○とは…」と簡単な説明を挟みたい

など

このように、知らない読者わからない読者のために、補足情報を本題の前に挿入するケースがあります。

前置きが不要な読者もいる

とはいえ読者の中には、すでに知っている人理解している人もいます。

また、すぐに本題の情報を知りたい読者もいるでしょう。

そんな読者にとって前置きはいらないものです。

ヨフカシ
ヨフカシ

ここまでも、この記事の「前置き」だったりする…

前置きが「必要な読者」と「いらない読者」のどちらにも対応できる解決策として、記事内をリンクで移動させる「ページ内リンク」という方法があります。

解決策は?

\ 記事内をリンクで移動させる方法 /

ページ内リンク

ページ内リンクを活用しよう!

ブログやネット記事を読んでいてテキストリンクでページ内を移動した経験がありますよね?

これは「ページ内リンク」と呼ばれる方法です。

CHECK!

他の呼び方もあります

  • 記事内リンク
  • ページ内ジャンプ
  • ジャンプリンク

*この記事内では「ページ内リンク」という表記で統一します

実際に「ページ内リンク」を体験しよう

ヨフカシ
ヨフカシ

先に進みたいのに、怖いライオンがいるよ(涙)

下のテキストをクリック(タップ)すると、ライオンと接触せずに進むことができます。

> ライオンを飛び越える

飛び越えた先

ヨフカシ
ヨフカシ

ふぅー、これで安心だ

これが「ページ内リンク」です。

この機能を使うことで前置き部分を読むか、飛ばすか、読者が選択することができます。

また移動場所を指定して誘導できるので、読者を本題のスタート位置に立たせることができます。読者が「どこからが本題なのか?」と迷子になるのを防げます。

メリット
  • 読者の判断で「読む / 読まない」の選択ができる
  • 本題のスタート位置に誘導できる
ヨフカシ
ヨフカシ

読者のストレスを減らせるね

では「ページ内リンク」の設定手順を紹介します。

ページ内リンクの仕組みと設定方法

リンクの解説

ページ内リンクは「出発する場所」と「着地する場所」の2つが必要です。

設定の順番
  • まず「着地点」を設定しよう
  • 「出発点」の設定は、後で行います

WordPressでは、意外と簡単な操作で設定できます。

ヨフカシ
ヨフカシ

ブロックエディタの手順を紹介するよ

①着地点の設定 – 名前をつける

解説①:まず着地点を設定する

手順としては、先に移動先となる「着地する場所」の準備をします。

リンクから飛んだ先の「着地点」を決めたら、その場所にプログラム上の「名前」をつけます。

具体例①

さきほど体験した「ライオンジャンプ」の具体的な設定を公開します。

  • 着地点のテキスト「飛び越えた先」
  • プログラム上の名前「safe-zone」

WordPressでは、着地点の設定は「ブロック単位」で選ぶことができます。

プログラム上の名前は、着地点として選択したブロックの「高度な設定」→「HTMLアンカー」の欄に入力します。

入力する文字に注意

プログラム上の名前(HTMLアンカーの欄)には、半角(英語 / 数字 / 記号)を使いましょう。

全角(ひらがな / カタカナ / 漢字)は避けましょう。

②出発点にリンクの設定をする

②出発点の設定は最後におこなう

出発する場所のテキストにリンクを設定します。

具体例②

「ライオンジャンプ」の設定

  • 出発点のテキスト「>ライオンを飛び越える」
  • 入力したURL「#safe-zone」

テキストの「>」はリンクを示す記号として挿入しています。なくても問題ありません。

URLを入力に注意してください。必ず「#(シャープ記号)」を付けてください。

WordPressでは、リンクを設定したいテキストを選択します。

リンクマークをクリックして開く、リンク先のURLを入力欄に、着地点のプラグラム上の名前を入力します。

これで、ページ内リンクの設定ができました。

リンクに関する豆知識

URLに「#(シャープ記号)」を付ける理由

「#」を付け忘れてしまうと、ページ内リンクとして機能しません。

「# + 名前」で、移動先の場所を示す表記になります。

重複した名前をつけないこと

ページ内リンクで複数の着地点を設定する場合に、注意してほしいことです。

例えば…

「Aの答え」「Bの答え」のように移動先がわかれている場合

着地点を2つとも「answer」にしてしまうと正しく誘導できません。

それぞれ「answer-A」「answer-B」と名前を分けて設定しましょう。

ルールは、着地点となる名前は重複しないことです。

【番外編】別のページの指定場所へリンクを設定する方法

【番外編】他のページにリンクで移動する場合

ここまでは、1つのページ内におけるリンク誘導の方法を紹介しました。

応用編として別のページ内に着地点を作りリンクを設定したい場合の設定方法を紹介します。

着地点の設定は、同じようにプログラム上の名前を付けるだけです。

出発点の設定に、少し工夫が必要です。

まず移動先となる別のページのURLを指定します。

そのページURLの最後に着地点となる「#名前」を追加で入力します。

これで、別のページの指定場所へリンクが設定できます。

「見出しブロック」にリンクが設定できない場合がある

ページ内リンクの活用として「見出しに着地したい」場合もあるでしょう。

基本的には、当記事で紹介した方法でリンクの設定ができるのですが、WordPressのテーマによっては見出しへのリンクが機能しない(ジャンプしない、移動しない)場合があるようです。

ヨフカシ
ヨフカシ

WordPressのテーマnよっては「見出し」に飛べない…

その場合には、着地点の設定を、見出しの直上のブロックにリンクを設定してください。

【まとめ】リンクはページ内の移動にも使える

今回はページ内にリンクを設定する「ページ内リンク」の方法を紹介しました。

「ページ内リンク」は、他にも「記事内リンク」「ページ内ジャンプ」「ジャンプリンク」などの呼び方があります。

出発点と着地点を用意して、正しくリンクの設定をしましょう。

ページ内リンクを使うと、

  • 前置きの「読む / 読まない」を、読者が選択できる
  • 「読んでほしい場所」や「本題のスタート位置」へ読者を誘導できる

など、読者のストレスを軽減することで離脱を防げる効果が期待できます。

「前置き部分」を例に挙げましたが、他にも有効な使い方があります。

同じページ内に複数設定できるので、「Aの答え」「Bの答え」などの誘導にも有効でしょう。

ただし使い過ぎは注意!

読者の手を煩わせてしまい逆にストレスに感じてしまったり、記事内を移動させすぎて読んでいた場所がわからなくなる可能性もあるので、ほどほどにしましょう。

PR

「THE THOR」の制作会社「フィット株式会社」より
新しいWordPressテーマがリリース!

↓公式サイトをチェック↓

ブロックエディタ 100%完全対応WPテーマ「ゴールドブログ」

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です