ページ内リンクまたはアンカーリンクは、読者がページ内の目的の情報に簡単に移動できる便利な機能です。
簡単に説明すると本に「付箋」をつけて目的情報を探しやすくする感じです。
SWELLでは、この便利な機能であるページ内リンクを簡単に設定することができます。
この記事では、SWELLを使ったページ内リンク（アンカーリンク）の設定方法を図解でわかりやすく解説します。
この記事を読んでわかること、
- ページ内リンク(アンカーリンク)とは？ (
- ページ内リンク(アンカーリンク)設定方法 (
- 別の記事のリンクに移動するリンクの設定方法
ページ内リンク(アンカーリンク)とは？
ページ内リンク(アンカーリンク)は、ウェブページ内の特定のセクションや要素に直接ジャンプするためのリンクです
。これにより、読者は長いページをスクロールすることなく、目的の情報に簡単に移動できます。
目的の情報にスムーズに移動することで、読者は素早く必要な情報を見つけることができ、読み手に親切なコンテンツとなります。
わんまるページ内のA地点から、一気に読みたいB地点にジャンプすることが出来ます
ねこ君すぐ目的の情報が見れていいよね！
①ジャンプ着地地点(ジャンプさせたい)に場所をクリックをクリックする
設定をクリックする
高度な設定をクリックする
HTMLアンカーにテキストを入力する
HTMLアンカーの注意点
- HTML アンカーは、文書内で固有でなければなりません (同じアンカーは使用できません)。
- 大文字と小文字が区別されます。
- ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができます。
- スペースを含めることはできません。
- HTML アンカーの先頭はアルファベットでなければなりません。
リンク元のテキストを選択する
リンクをクリック
「＃+④のHTMLアンカー」を入力する
わんまる決定をクリック
設定終了です
別の記事のリンクに移動するリンクの設定方法
ページ内にの目的情報に移動するだけではなく、SWELLでは別の記事の目的情報にも簡単に移動するリンクを設定することができます。
「別の記事ＵＲＬ/#ＨＴＭＬアンカー」を入力すると、別の記事の目的情報にジャンプすることができます。
例えば、ボタンブロックの使い方の記事内の、さらに「ボタンブロックの便利な機能」の情報がみたいとします。
ボタンブロックの使い方の記事のURL(https://webnext.info/swell-button/)にボタンブロックの便利な機能(#b)に移動させたければ、下記になります。
ボタンブロックの使い方の記事
まとめ
ページ内リンクを活用することで、読者に必要な情報を早く届けたり、記事を読みやすくすることができます。読み手に親切なコンテンツとなり、ユーザビリティが向上につながります。
SWELLでは簡単に設定できます。ぜひ今後の記事にご活用下さい。
