AFFINGER5 ブログ

【AFFINGER5】ページ内ジャンプ(リンク)のやり方

AFFINGER5ページ内リンク

 

ハテナな人
記事内のテキストをクリックして、目的の見出しにジャンプさせる方法が知りたい。

 

よくブログ記事を読んでいると現れる、便利機能『ページ内リンク』についての設定方法をご説明します。

 

本記事の内容

・ページ内リンクとは

・アフィンガー5のページ内リンクの設定方法

・プラグインなしで設定する場合

・設定後はプレビュー画面で動作確認をしよう

 

誰でも簡単に設定できるので、これを機会にページ内リンクを使って、より読者目線の動線を作りましょう。

 

この記事を書いている人

  • 有料テーマAFFINGER5を使用
  • その他AFFINGER5のお悩み記事も随時執筆中

 

それでは早速いってみましょう。

 

 

ページ内リンクとは

 

設定方法の手順紹介の前に、念のためにページ内リンクについてご説明します。

 

ページ内リンクとは、

目次をクリックした時に指定場所へジャンプする動作を、記事内のテキストから指定場所へジャンプできるようにすることです。

 

ではテストでどのようにジャンプするか確認していきましょう。

 

【テストジャンプ】 クリックしてみてください。

 

少し上に戻って『ページ内リンクとは』の見出しにジャンプしました!この方法が知りたかったんです。
理解した人

 

アフィンガー5のページ内リンクの設定方法

アフィンガー5ページ内リンク

 

それではページ内リンクを使って指定場所にジャンプさせる方法をご説明します。

 

手順は2つになっております、覚えれば10秒ほど設定できちゃいます。

 

ページ内リンクの設定方法

  1. テキストにリンクを設定
  2. ジャンプしたいところにアンカー設定

 

この2つを画像付きでしっかりと説明していきますね。

 

テキストにリンクを設定

 

まずは最初に、指定場所にジャンプするための仕込みをします。

 

テキストにリンク設定手順①

内部リンク設定手順

ジャンプさせたいテキストをドラッグして『リンク挿入』を押す

 

注意点はリンクテキストを任意で入力する際に『#a』と入力するのですが、『#1』など数字を誤って使ってしまうと次に説明をするアンカー設定ができないので使用はNGです。

 

まずこれで、テキストにリンクの仕込み設定は完了しました。

 

ジャンプしたい所にアンカー設定

 

続いては、ジャンプで飛んでくる場所を設定します。

 

アンカー設定手順①

アンカー設定1

飛ばしたい見出しやテキストを選択した後に『アンカーボタン』を押します

 

アンカー設定手順②

アンカー設定2

アンカーに『a』と指定します。

 

ここで注意なのは、『#』は入力しないことです。

 

以上で設定終了となります。

 

これなら初心者の私でもすぐに設定できそうです!さっそく使ってみます。
頑張ろうな人

 

プラグインなしで設定する場合

プラグインなし設定

 

プラグインなしでも、ページ内リンクを設定できるのでご安心ください。

 

リンク先の設定は【テキストにリンクを設定】と同じ手順を行えばオッケーです。※リンク挿入から指定できます。

 

そしてアンカー部分(ジャンプで飛んでくる場所)に下記のHTMLを、テキストエディタに切り替えて入力して下さい。

 

<a id="a"></a>  ←【アンカーのHTML】

 

HTML挿入場所

 

こんな風に使って下さい

その① :  テキストエディタに切り替える。

その② :  <a id="a"></a>をジャンプで飛んでくる見出し部分にくっ付ける。

※ポイントはテキスト文字(見出し部分)の頭にHTMLをくっ付けることです。

 

設定後はプレビュー画面で動作確認をしよう

 

もちろんですが、設定したつもりでもちゃんと設定ができていない可能性があります。

 

一度設定後にプレビュー画面から『ページ内リンク』の準備が、できているか確認をしましょう。

 

うまくページ内リンクを使えば、「読者が求める結論部分」にいち早くジャンプすることができるので離脱率を下げれるようになります。

 

目次とうまく使い分けて、読者ファーストな記事を書きましょう!

 

-AFFINGER5, ブログ

© 2020 HAJIMEKATA Blog