WordPressで目次からページ内リンク(アンカーリンク)を設定する方法

20171027B

こんにちは、名畑です。
連日の週末台風予報にヒヤヒヤしています。
日曜に出かける予定をやめてしまったり、晴れた週末を過ごしたいです。

今回はページ内リンクを設定する方法をご紹介します。

目次
  • 1. ページ内リンク(アンカーリンク)とは
  • 2. ページ内リンク(アンカーリンク)を設定する方法
  • 3. おわりに

ページ内リンク(アンカーリンク)とは

アンカーリンクとはページ内ジャンプのことで、ページが長い場合クリックすると指定した場所に飛ぶことができます。
長いブログ記事やランディングページ等によく使用されるリンクです。
ブログの場合目次があり、目次をクリックすると該当の見出しに飛ぶようにすると、ブログを読みに来た人は読みたい部分がすぐに読めるのでストレスなく読み始めることができます。

目次の設定仕方はこちら
ブログの本文に目次を付けて見やすくしよう
https://www.infact1.co.jp/staff_blog/webmarketing/blog-use/31201/

ツールが表示されていれば簡単に設定ができます。

ページ内リンク(アンカーリンク)を設定する方法

目次のリンクさせたいテキストを選択します。
20171027b01

ツールバーからリンクのアイコンをクリックします。
20171027b02

歯車マークをクリックします。
20171027b03

URLの部分にリンクのID「#link01」と入力して「更新」をクリックします。
20171027b04

この「#link01」というのは下の位置にページを移動させる際に指定するID番号です。
さらに増やしたい場合は、分かりやすいように「#link02」「#link03」と「#+英数字」を指定しましょう。
リンクを設定する際は『#』を一番最初につけるようにしてください。
また、数字だけですと動作されませんので注意をしましょう。

次に移動させたい位置をクリックします。
20171027b05

ツールバーのリボンがたれているようなアイコンをクリックします。
20171027b06

テキスト入力欄に先程設定したIDの「#」をぬいた英数字を入力します。
今回は「#link01」と指定したので「link01」と入力します。
20171027b07

移動したい位置の上にアンカーマークが表示されたら設定完了です。
20171027b08

おわりに

スマートフォンでブログを見た際や、記事のボリュームが多い場合はページ内リンクを使用することで、より読みやすい記事にすることが可能です。
是非ご活用くださいませ!

  • シェア
  • twitter
The following two tabs change content below.
名畑かなえ
株式会社インファクトのディレクターです。
フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。
好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。
やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP
LINE it!