よくブログ記事を読んでいると現れる、便利機能『ページ内リンク』についての設定方法をご説明します。
本記事の内容
・ページ内リンクとは
・アフィンガー５のページ内リンクの設定方法
・プラグインなしで設定する場合
・設定後はプレビュー画面で動作確認をしよう
誰でも簡単に設定できるので、これを機会にページ内リンクを使って、より読者目線の動線を作りましょう。
この記事を書いている人
- 有料テーマAFFINGER5を使用
- その他AFFINGER5のお悩み記事も随時執筆中
それでは早速いってみましょう。
ページ内リンクとは
設定方法の手順紹介の前に、念のためにページ内リンクについてご説明します。
ページ内リンクとは、
目次をクリックした時に指定場所へジャンプする動作を、記事内のテキストから指定場所へジャンプできるようにすることです。
ではテストでどのようにジャンプするか確認していきましょう。
【テストジャンプ】 ← クリックしてみてください。
アフィンガー5のページ内リンクの設定方法
それではページ内リンクを使って指定場所にジャンプさせる方法をご説明します。
手順は２つになっております、覚えれば１０秒ほど設定できちゃいます。
ページ内リンクの設定方法
- テキストにリンクを設定
- ジャンプしたいところにアンカー設定
この２つを画像付きでしっかりと説明していきますね。
テキストにリンクを設定
まずは最初に、指定場所にジャンプするための仕込みをします。
テキストにリンク設定手順①
ジャンプさせたいテキストをドラッグして『リンク挿入』を押す
注意点はリンクテキストを任意で入力する際に『#a』と入力するのですが、『#1』など数字を誤って使ってしまうと次に説明をするアンカー設定ができないので使用はNGです。
まずこれで、テキストにリンクの仕込み設定は完了しました。
ジャンプしたい所にアンカー設定
続いては、ジャンプで飛んでくる場所を設定します。
アンカー設定手順①
飛ばしたい見出しやテキストを選択した後に『アンカーボタン』を押します
アンカー設定手順②
アンカーに『a』と指定します。
ここで注意なのは、『#』は入力しないことです。
以上で設定終了となります。
プラグインなしで設定する場合
プラグインなしでも、ページ内リンクを設定できるのでご安心ください。
リンク先の設定は【テキストにリンクを設定】と同じ手順を行えばオッケーです。※リンク挿入から指定できます。
そしてアンカー部分（ジャンプで飛んでくる場所）に下記のHTMLを、テキストエディタに切り替えて入力して下さい。
<a id="a"></a> ←【アンカーのHTML】
こんな風に使って下さい
その① : テキストエディタに切り替える。
その② : <a id="a"></a>をジャンプで飛んでくる見出し部分にくっ付ける。
※ポイントはテキスト文字（見出し部分）の頭にHTMLをくっ付けることです。
設定後はプレビュー画面で動作確認をしよう
もちろんですが、設定したつもりでもちゃんと設定ができていない可能性があります。
一度設定後にプレビュー画面から『ページ内リンク』の準備が、できているか確認をしましょう。
うまくページ内リンクを使えば、「読者が求める結論部分」にいち早くジャンプすることができるので離脱率を下げれるようになります。
目次とうまく使い分けて、読者ファーストな記事を書きましょう！