STORES決済

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

今日も元気に個人商店を営んでいる40代「ヨフカシ(@yofukashi-kirin)」です。

ブログ記事で、本題の前に「予備知識」や「事前の解説」を入れることはありませんか?

  • 詳しく知らない読者がいるかも知れない
  • 前置きとして伝えておきたい
  • 記事の流れとして必要だから

など、書く側の理由があると思います。

しかし読者の中には、すでに知っているから前置きがいらない読者もいるかもしれません。

ブログは「結論を先に伝える」のがセオリーです。

本題に到達する前に余計なものがあると、ページから離脱されてしまう可能性もあります。

そこで、リンクの機能を活用し、記事内の目的の場所へ移動させる方法を紹介します。

こんな人にオススメ!

  • 記事の中でのリンク移動のやり方がわからない

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

記事の内容によっては、どうしても前置きの説明を入れたいことがあると思います。

顔を合わせて話をしているなら、相手に確認することができます。

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

記事を書く側は「どんな人が読んでくれるか?」を想定し、必要な情報を含めて記事を構成します。

例えば

  • 「前回の続き」のような記事の場合
    • 念のため「前回の話のあらすじ」を載せておく
  • 「○○の使用方法」のような記事の場合
    • 「○○とは」と簡潔に説明しておく

このように、知らない読者、わからない読者のために、補足の情報を載せておくこともあるでしょう。

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

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

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

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

 
ヨフカシ
ここまでも、この記事の「前置き」だったりする。

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

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

誰かの記事を読んでいてテキストリンクで、ページ内を移動した経験があるはずです。

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

他の呼び方もあります

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

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

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

 
ヨフカシ
先に進みたいのに、怖いライオンが待ち構えているな…

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

> ライオンを飛び越える

飛び越えた先

 
ヨフカシ
ふぅー、これで安心。

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

この機能を使うと前置き部分を読むかどうか、読者に選択させることができます。また移動場所を指定して誘導することで、読者が「どこからが本題なのか?」と探す必要がありません。

 
ヨフカシ
読者のストレスを減らせるね。

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

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

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

  1. 先に「着地する場所」を設定する
  2. あとで「出発する場所」にリンクを設定する

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

ちなみに、この記事ではWordPressのブロックエディタでの手順を解説します。

①着地点の設定(名前を付ける)

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

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

先ほどのライオンジャンプの例

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

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

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

プログラム上の名前は「半角の英語、数字、記号」を使って設定する方がいいです。
ひらがな、カタカナ、漢字などの日本語を使うのは避けましょう。

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

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

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

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

先ほどのライオンジャンプの例

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

URLを入力する時は、名前の前に「#」(シャープ記号)を付けてください

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

リンクに関する豆知識

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

ページ内リンクを設定するときに「#」を付け忘れてしまうとリンクとして機能しません。

Webページのプログラムでは、着地点につけた名前は「ID」という扱いになります。

リンク先が「ID」で設定された場所であることを示すのが「#」の記号です。

「ID」は唯一の存在であることが原則

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

例えば、「Aの答えは、こちら」「Bの答えは、こちら」と移動先がわかれてるような場合、着地点の名前を2つとも「answer」にしてしまうと、どちらのリンクも同じ場所に誘導されてしまいます。

それぞれ「answer-A」「answer-B」と名前を分けて設定しなければいけません。

つまり着地点となる「ID」は、重複しない唯一の名前をつけることがルールです。

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

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

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

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

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

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

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

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

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

ブログの記事の前置き部分を、読者が読み飛ばしできるように、ページ内にリンクを設定する「ページ内リンク」の方法を紹介しました。

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

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

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

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

ただし使い過ぎると、読者の手を煩わせてしまいストレスになってしまったり、記事のどこを読んでいたのかわからなくってしまう可能性もあるので、ほどほどにしましょう。