> 【チート級】ChatGPTでブログ執筆を超効率化へ!10倍速で書く方法
PR

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

SWELL-page-link-creation

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

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

ヒナキラ

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

本記事の内容
  • ページ内リンクとは何か
  • 「目次に戻る」(ページ内リンク)を作る方法
Blog

この記事を書いた人

ヒナキラ

ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー15,600人。ブログとSNSとSEOがすき。ChatGPTでの効率化も。SWELL大好き自称テーマおたく。

Blog

この記事を書いた人

ヒナキラ

ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー15,600人。ブログとSNSとSEOがすき。ChatGPTでの効率化も。SWELL大好き自称テーマおたく。

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

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

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

見たいところに飛べる目次

ページ内リンクとは?

ページ内リンク

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

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

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

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

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

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

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

⇧目次に戻る

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

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

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

HTMLアンカーに「目次」など任意のテキストを入力

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

STEP
ページ内リンクに設定したい「テキストを入力」
ページ内リンクに設定したい「テキストを入力」
STEP
「リンク」ボタンをクリックする
リンクボタンをクリック
STEP
「#目次」入力して矢印マークをクリック

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

#目次 と入力
STEP
「目次に戻る」ページ内リンク設置完了

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

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

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

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

では、今回は以上です。

⇧目次に戻る

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次