ここではWordPressブログでページ内リンクを作成し、同じ記事内で指定した箇所にジャンプ出来るようにする方法を解説していきたいと思います。
読者がブログの記事内で必要な情報にアクセスしやすい、便利でやさしい記事を書きたい方は是非参考にしてみて下さい。
ポイントをざっと述べると↓
- アンカーを使ったページ内リンクの作成方法を説明します。
- 結論部分への誘導や目次に戻るというような使い方を僕はしています。
ここから本文が始まっていくから読んでね～。
ワードプレスでのページ内リンクの貼り方。
ワードプレスでのページ内リンクの貼り方の手順は以下のようなものになります。
- テキストにリンクを貼る。
- ジャンプさせたい箇所にアンカーを貼る。
テキストにリンクを貼る。
リンクを設定したいテキスト部分（クリックするとジャンプするようにしたい部分）を選択し、リンクの挿入ボタンをクリックします。
挿入するリンクの文字列は「#」から始まる英数字で、何でもOKです。
ここでは例としてリンクを「#aaa」としています。
またリンクを貼るテキストは「答えを見たい人はここをクリック！」の「ここ」にしています。
ジャンプさせたい箇所にアンカーを貼る。
次にジャンプさせたい箇所（ジャンプ先）にアンカーというものを貼っていきましょう。
アンカーを挿入したい箇所にカーソルを合わせ、アンカーボタンを押します。
（アンカーボタンが表示されていない場合はプラグインTinyMCE Advancedで設定する等してみて下さい）
この記事では例として、記事冒頭部分の「■ここではWordPressブログでページ内リンクを作成し・・・」の直前（■の部分）にアンカーを挿入してみます。
入力するアンカーの文字列は先ほど設定したリンクの#を含まないものにします。
先ほどの例で言うと「#aaa」というリンクを貼ったので、アンカーは「aaa」になります。
ページ内リンクのサンプル
説明の中で設定したページ内リンクは下記になります。
答えを見たい人はここをクリック！
（記事の冒頭にジャンプします）
ページ内リンクの注意点。
同じ記事内でページ内リンクのアンカーは1種類につき1度しか使えません。
同じアンカーを複数回使ってしまった場合、最初に設定したもののみ有効となります。
また、記事編集画面で下記のようにテキストエディタで入力する事でページ内リンクは作成可能です。
- リンクを貼りたい文字列を<a href=”#〇〇〇”>と</a>で挟む。
- アンカーを挿入したい場所に<a id=”〇〇〇”></a>を記載する。
ページ内リンクの有効な使い方。
僕はページ内リンクを主に次のように使うことが多いです。
- 結論部分へ飛ばす。
- 説明上振り返ってほしい部分へ飛ばす。
- 目次に戻る。
結論部分へ飛ばす。
僕は記事を書く際になるべく結論から入るような構成を心がけているのですが、どうしても最初の部分で前置きの説明をしなくてはならない場合もあります。
そのような場合、既に理解している読者にとっては「そんなの知ってるから早く結論言えよ！」と思われてしまいかねません。
そういう読者の気持ちはめっちゃ分かります。
そこで「既にご存知の方はこちらから結論部分へ」というようなページ内リンクを最初の部分に設置する事で、読者のストレス軽減につながります。
説明上振り返ってほしい部分へ飛ばす。
説明の都合上、振り返って欲しい部分にページ内リンクを飛ばしたりしています。
特に文章が長くなってしまうと、前半部分で延べた事をいちいち覚えていられないという読者も多いでしょう。
そんな時に少しでも文章を理解してもらいやすくする為の工夫です。
目次に戻る。
文章の意味が切れるポイントで目次に戻るページ内リンクを設置するのも有効です。
自分の知りたい事が大体わかった時点で、読者が目次に戻れると必要な情報を取捨選択しながら記事を読めるようになるからです。
ぜひ色々試してみて下さい！
今回の内容は以上です。
最後まで読んで頂きありがとうございました！
