> 大評判のSWELLを徹底レビュー!気になる口コミ・評判は?

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

SWELL-page-link-creation

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

マチコ

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

ヒナキラ

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

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

この記事の監修者

ヒナキラ 編集長

30代凡人ブロガー。ブログ月収6桁。複数サイト運営。有料テーマ13コを扱う自称テーマまにあ。Twitter(@OneokrockHomme)フォロワー8,000人。ブログが大好き。

Blog

この記事の監修者

ヒナキラ 編集長

30代凡人ブロガー。ブログ月収6桁。複数サイト運営。有料テーマ13コを扱う自称テーマまにあ。Twitter(@OneokrockHomme)フォロワー8,000人。ブログが大好き。

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

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

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

デザインが綺麗でオシャレ、使いやすく、高機能。

SWELLの評判を集めた記事は →SWELLの口コミ評判・レビュー

有料テーマ12コ使う僕のイチオシWordPressテーマです。

≫SWELL公式サイトはこちら

タップできる目次

ページ内リンクとは?

ページ内リンク

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

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

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

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

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

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

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

⇧目次に戻る

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

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

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

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

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

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

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

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

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

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

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

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

では、今回は以上です。

⇧目次に戻る

デザインが綺麗でオシャレ、使いやすく、高機能。

SWELLの評判を集めた記事は →SWELLの口コミ評判・レビュー

有料テーマ12コ使う僕のイチオシWordPressテーマです。

≫SWELL公式サイトはこちら

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

コメント

コメントする

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

CAPTCHA

タップできる目次