【SWELL】ページ内の途中へリンク(ジャンプ)させたい!アンカーリンクのやり方を解説!

ページ内リンクのやり方について紹介していきます。


記事の文量が多いとき、余計な説明はいらないから結論を知りたい人もいますよね。

そんな方へストレスなく目的の記事へジャンプしたい場合に便利なページ内リンクです。

ユーザビリティの向上になるので離脱を防げます。

目次

ページ内リンクとは

ページ内リンクとは、同じページ内で特定の場所へジャンプして移動するリンクのことです。


例えばアプリの使用方法を説明する記事を書いていたとして、すでにアプリをインストールしている人はインストールの説明を読む必要無いですよね。

そんなときは、インストールの説明をジャンプしてアプリの使用方法へ誘導して上げた方がユーザビリティがUPします。


次のリンクをクリックしてみて下さい。一番最後の見出しブロックへジャンプします。
さいごへ

ページ内リンクの作成方法

STEP
HTMLアンカーを設定する
  1. ジャンプしたい場所(例では見出し3へジャンプする)をクリックします。
  2. 右側のメニューを一番下までスクロールして「高度な設定」をクリックすると「HTMLアンカー」項目があります。
  3. 分かりやすい名前をつけて下さい。(ここではexampleとしました)
【SWELL】ページ内の途中の記事にリンクさせたい!アンカーリンクのやり方を解説!
STEP
ジャンプ元のテキストを選択

ジャンプしたい元のテキストを選択し、リンクボタンをクリックします。

【SWELL】ページ内の途中の記事にリンクさせたい!アンカーリンクのやり方を解説!
STEP
ページ内リンクを貼る

ページ内リンクを設定する。
Step1で設定したHTMLアンカーの先頭に#付け#exampleと記入し決定ボタンを押してください。

#example
【SWELL】ページ内の途中の記事にリンクさせたい!アンカーリンクのやり方を解説!
STEP
完了

これでページ内リンクの完了です。

見出し3へのリンクをクリックすると、見出し3へジャンプします。

【SWELL】ページ内の途中の記事にリンクさせたい!アンカーリンクのやり方を解説!

別ページの途中へリンク(ジャンプ)させる方法

別記事の途中にリンクさせたい場合もありますよね。

そんなときは、URL+#HTMLアンカーを指定すればOKです。

https://shimautablog.com/yubinbango-contactform/#yubinbango

YubinBangoの使い方

さいごに

ページ内リンクの作成方法について説明しました。

とても簡単に設定できます。

目次