WordPressで、同一ページ内(記事内)の特定の場所に、リンク(ジャンプ)させたい場合ってありますよね。
特に記事が長くなる場合や、読み飛ばしてもいい箇所がある場合などに、ページ内リンクを張ることによって、ユーザビリティが高まります。
要はユーザーが目的の場所にたどり着くのに、画面をシャッシャッとスワイプさせる手間を省くことができ、ユーザーの満足度向上にもつながります。
では、このページ内リンクは簡単に設定できるのでしょうか。
WordPressを使われている方なら、多くの方がインストールされている「TinyMCE Advanced」を使えば、ものすごく簡単に設定できます!
それでは、設定方法をみてみましょう。
設定方法
ページ内リンクをするには、以下の2つのステップが必要です。
①リンク先にアンカーを設定する方法
リンク先は、ページ内でジャンプしたい特定の場所となります。
リンクテキストをクリックしたら飛ぶ先ですね。
アンカーの設定とは、リンク先となる特定の場所に、任意の文字列を設定することです。
では、TinyMCE Advancedがインストールをされていることを前提に説明します。
アンカーボタンがあるか確認してください。
※上図のアンカーのマークが見つからない場合は、[ダッシュボード]-[設定]-[TinyMCE Advanced]を開いてください。アンカーボタンが「使用しないボタン」一覧にある場合は、ドラッグして上のエディターメニューに追加してください。
上の図で、「1.やりひこうき」のタイトルのところにリンク先を指定する場合は、「1.やりひこうき」の文字列にアンカーを設定します。
「1.やりひこうき」をドラッグで選択して、アンカーボタンをクリックします。
そうすると、アンカーIDの入力を求められますので、半角英字からはじまる任意の文字列をIDとします。ここは簡単なもので構いません。
ただし、同一ページ内で異なるリンク先に同じIDは使えませんので注意してください。
※半角英字で始める必要があります。例えば、IDを「1」とすることはできません。
アンカーの設定が終わると、リンク先の文字列の先頭にアンカー(いかり)マークが追加されます。
②テキストにリンクを設定
リンク元のテキストにリンクを設定します。ここでリンク設定したテキストをクリックすると、アンカー設定した場所までジャンプすることになります。
リンク元のテキストを決めます。この例では、「1.やりひこうきの最初へ戻る」としています。その文字列をドラッグして選択し、リンクボタンをクリックしてください。
①で決めたアンカーIDの前に「#」を付けます。「#」を必ず忘れないように。
↓
これでページ内リンクの完了となります。
確認
本当にリンクするか確かめてください。
自分が指定したテキストをクリックしたときに、ちゃんと自分が行ってほしいところまでジャンプできたかどうか。
参考として、このページ内でリンクを設定しています。以下のテキストをクリックすると、オレンジのラベル付きボックスへジャンプしますので試してみてください。
ページ内リンクをするために必要な2ステップをご覧ください。
まとめ
ページ内リンクを設定する2つのステップは、
①リンク先にアンカーを設定
②テキストにリンクを設定
でしたが、①と②はどちらが先でもページ内リンクをすることができます。