Wordpress

【ワードプレス】ページ内リンクを貼って記事の途中にジャンプさせる方法!

この記事の内容

ここではWordPressブログでページ内リンクを作成し、同じ記事内で指定した箇所にジャンプ出来るようにする方法を解説していきたいと思います。

読者がブログの記事内で必要な情報にアクセスしやすい、便利でやさしい記事を書きたい方は是非参考にしてみて下さい。

田村カツオ
田村カツオ
ポイントをざっと述べると↓
  • アンカーを使ったページ内リンクの作成方法を説明します。
  • 結論部分への誘導や目次に戻るというような使い方を僕はしています。
この記事を読んで実践することで、ページ内リンクを使いこなし、より読者に寄り添った記事が書けるようになるでしょう。
カッパ君
カッパ君
じゃ、本題に入っていきまーす。

ワードプレスでのページ内リンクの貼り方。

ワードプレスでのページ内リンクの貼り方の手順は以下のようなものになります。

  1. テキストにリンクを貼る。
  2. ジャンプさせたい箇所にアンカーを貼る。

テキストにリンクを貼る。

リンクを設定したいテキスト部分を選択し、リンクの挿入ボタンをクリックします。

リンクの挿入ボタン

 

挿入するリンクの文字列は「#」から始まる英数字で、何でもOKです。

ここをクリック

↑ここでは例として「#aaa」としています。

ジャンプさせたい箇所にアンカーを貼る。

次にジャンプさせたい箇所にアンカーというものを貼っていきましょう。

アンカーを貼りたい箇所を選択し、アンカーボタンを押します。

アンカーボタン

アンカーボタンが表示されていない場合はプラグインTinyMCE Advancedで設定してみて下さい。

 

入力するアンカーの文字列は先ほど設定したリンクの#を含まないものにします。

先ほどの例で言うと「#aaa」というリンクを貼ったので、アンカーは「aaa」になります。

アンカーの入力例

ページ内リンクのサンプル

説明の中で設定したページ内リンクは下記になります。

答えを見たい人はここをクリック!

※クリックすると解説の開始箇所にジャンプ。

ページ内リンクの注意点。

同じ記事内でページ内リンクのアンカーは1種類につき1度しか使えません。

同じアンカーを複数回使ってしまった場合、最初に設定したもののみ有効となります。

ページ内リンクの図

 

また、記事編集画面で下記のようにテキストエディタで入力する事でページ内リンクは作成可能です。

  1. リンクを貼りたい文字列を<a href=”#〇〇〇”></a>で挟む。
  2. アンカーを挿入したい場所に<a id=”〇〇〇”></a>を記載する。

ページ内リンクの有効な使い方。

僕はページ内リンクを主に次のように使うことが多いです。

  1. 結論部分へ飛ばす。
  2. 説明上振り返ってほしい部分へ飛ばす。
  3. 目次に戻る。

結論部分へ飛ばす。

僕は記事を書く際になるべく結論から入るような構成を心がけているのですが、どうしても最初の部分で前置きの説明をしなくてはならない場合もあります。

そのような場合、既に理解している読者にとっては「そんなの知ってるから早く結論言えよ!」と思われてしまいかねません。

カッパ君
カッパ君
そういう読者の気持ちは分かる。

そこで「既にご存知の方はこちらから結論部分へ」というようなページ内リンクを最初の部分に設置する事で、読者のストレス軽減につながります。

説明上振り返ってほしい部分へ飛ばす。

説明の都合上、振り返って欲しい部分にページ内リンクを飛ばしたりしています。

特に文章が長くなってしまうと、前半部分で延べた事をいちいち覚えていられないという読者も多いでしょう。

そんな時に少しでも文章を理解してもらいやすくする為の工夫です。

目次に戻る。

文章の意味が切れるポイントで目次に戻るページ内リンクを設置するのも有効です。

自分の知りたい事が大体わかった時点で、読者が目次に戻れると必要な情報を取捨選択しながら記事を読めるようになるからです。

 

ぜひ色々試してみて下さい!

今回の内容は以上です。

ABOUT ME
田村カツオ
副業お坊さんブロガー。YouTubeとTwitterもよろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。

nineteen − nine =