SWELLでページ内リンク（目次に戻る）を作る方法を解説します。
マチコ目次に戻るっていう記事内のテキストリンクを見るけど、どうやって作ってるの？
ヒナキラこういった疑問を一発解消します。
本記事の内容
- ページ内リンクとは何か
- 「目次に戻る」（ページ内リンク）を作る方法
SWELLでページ内リンクを作りたいけど、作り方が分からない･･･。
検索したらプラグインが必要みたいな記事が多いけど、やっぱりプラグイン使わないとダメなのかな？
このように悩んでいる方は、是非この記事を読んでみて下さい。
見たいところに飛べる目次
ページ内リンクとは？
ページ内リンクとは、同じページ内のある地点（ア）から別の地点（イ）にジャンプさせるためのリンクのことです。
ちなみに、この記事でいうと「目次」もページ内リンクの一種です。
試しにクリックすると分かりますが、目次の気になる部分をクリックすると該当箇所までジャンプします。
つまり、ページ内リンクを設置すると、いちいち該当箇所までスクロールする必要がなくなってユーザーにとって優しいコンテンツとなります。
SWELLでページ内リンクを作成する方法
では、SWELLのブロックエディターを使ってページ内リンクを作成する方法を解説します。
ここでは、以下のような「目次に戻る」ページ内リンクを設定します。
STEP
リンク先に指定したい箇所をクリックしてHTMLアンカーに任意のテキストを入力
ページ内リンクでジャンプする目的地を決めます。
今回は「目次に戻る」というページ内リンクを作るので、目次直前の空きブロックを指定します。
STEP
ページ内リンクに設定したい「テキストを入力」
STEP
「リンク」ボタンをクリックする
STEP
「#目次」入力して矢印マークをクリック
まとめ｜SWELLでページ内リンクを設定してユーザビリティ向上へ
ページ内リンクを設定すると、いちいち該当箇所までスクロールしなくて済むので、ユーザーに優しいコンテンツにできます。
つまり、ユーザビリティが向上します。
ひいてはSEOにも効果があると考えられるので、ぜひ使ってみて下さいね。
では、今回は以上です。
あわせて読みたい
SWELL初心者向けの使い方マニュアル【2023年5月版】
SWELLの使い方を、SWELL初心者向けに、公式サイトのマニュアルよりも詳しく解説。
SWELLの導入から、プラグイン、ブロックエディター、専用ブロックまで網羅しています。
コメント