SWELLでページ内リンク（目次に戻る）を作る方法を解説

SWELLでページ内リンク（目次に戻る）を作る方法を解説します。

目次に戻るっていう記事内のテキストリンクを見るけど、どうやって作ってるの？

ヒナキラ

こういった疑問を一発解消します。

この記事を書いた人

ヒナキラ

ブログ最高月25万円。副業最高月700万円。Twitter(X)フォロワー20,200人。ブログとSNSとAIがすき。MENSA会員。15この有料テーマを使い、テーマ制作もしてみた自称テーマおたく。

この記事を書いた人

ヒナキラ

ブログ最高月25万円。副業最高月700万円。Twitter(X)フォロワー20,200人。ブログとSNSとAIがすき。MENSA会員。15この有料テーマを使い、テーマ制作もしてみた自称テーマおたく。

SWELLでページ内リンクを作りたいけど、作り方が分からない･･･。

検索したらプラグインが必要みたいな記事が多いけど、やっぱりプラグイン使わないとダメなのかな？

このように悩んでいる方は、是非この記事を読んでみて下さい。

ページ内リンクとは？

ページ内リンクとは、同じページ内のある地点（ア）から別の地点（イ）にジャンプさせるためのリンクのことです。

ちなみに、この記事でいうと「目次」もページ内リンクの一種です。

試しにクリックすると分かりますが、目次の気になる部分をクリックすると該当箇所までジャンプします。

つまり、ページ内リンクを設置すると、いちいち該当箇所までスクロールする必要がなくなってユーザーにとって優しいコンテンツとなります。

SWELLでページ内リンクを作成する方法

では、SWELLのブロックエディターを使ってページ内リンクを作成する方法を解説します。

ここでは、以下のような「目次に戻る」ページ内リンクを設定します。

⇧目次に戻る

STEP

リンク先に指定したい箇所をクリックしてHTMLアンカーに任意のテキストを入力

ページ内リンクでジャンプする目的地を決めます。

今回は「目次に戻る」というページ内リンクを作るので、目次直前の空きブロックを指定します。

目次をリンク先に指定したい場合は、第一見出しや第一見出し直前を指定すると良いでしょう。（SWELLの目次は自動作成されるので、指定するブロックがない）

STEP

ページ内リンクに設定したい「テキストを入力」

STEP

「リンク」ボタンをクリックする

STEP

「#目次」入力して矢印マークをクリック

STEP1でHTMLアンカーに入力した任意のテキストを入力。
※今回は「目次」と設定したので、｢#目次」となります。

STEP

「目次に戻る」ページ内リンク設置完了

⇧目次に戻る

まとめ｜SWELLでページ内リンクを設定してユーザビリティ向上へ

ページ内リンクを設定すると、いちいち該当箇所までスクロールしなくて済むので、ユーザーに優しいコンテンツにできます。

つまり、ユーザビリティが向上します。

ひいてはSEOにも効果があると考えられるので、ぜひ使ってみて下さいね。

では、今回は以上です。

⇧目次に戻る

あわせて読みたい

SWELL初心者向けの使い方マニュアル【2024年11月版】 SWELLの使い方を、SWELL初心者向けに、公式サイトのマニュアルよりも詳しく解説。 SWELLの導入から、プラグイン、ブロックエディター、専用ブロックまで網羅しています。