☞ 初心者にオススメの便利ツール12選

【作業時間5分】SWELLでページ内リンクを設置する方法!

当ページのリンクには広告が含まれています。
記事タイトルとイラスト画像
  • URLをコピーしました!

今回は

記事内で読みたい場所にジャンプするのってどうやるの?

ページ内リンクなんて難しそうだなぁ…。

そんな悩みを解決していきます。

自己紹介
この記事を読んで欲しい人
  • 有料テーマ「SWELL」のユーザーさん
  • ブログ初心者さん
  • ページ内リンク(アンカーリンク)の設置方法が知りたい人

記事内の読みたい場所へジャンプするリンクの設置方法は「超簡単」なので、ブログ初心者さんでも本記事を読み進めていただければ簡単にできちゃいます。

難しい言葉は一切使わずに、できるだけわかりやすく解説していくので、ぜひ最後まで読んでいってください。

また、自分のサイトも開いて読みながら一緒に作業すると、より理解が深まるのでおすすめです。

それでは、早速本題に参りましょう。

目次

ページ内リンクとは

ページ内リンクとは、同じページ内の指定した場所へジャンプするリンクのことで、「アンカーリンク、「記事内リンク」も同じ意味で使われます。

ページ内リンクを使うことで、ユーザーさんが必要とする情報まで瞬時に辿り着ける便利な機能です。

例えば、キャンプについての記事の場合、テントをすでに購入しているユーザーさんにとっては、「おすすめのテント情報」は必要ありませんよね。

そんな時は、ページ内リンクを使って必要な情報までジャンプしてもらうことで、記事が読みやすくなります。

トム

実際に使ってみてください。

次のリンクをクリックすると、記事の1番下まで「ジャンプ」します。

SWELLでページ内リンクを設定する方法

それでは、

トム

ページ内リンクを一緒に設置していきましょう。

STEP
ジャンプしたい位置(行き先)をクリック
STEP
ページ右側の高度な設定をクリック
STEP
HTMLアンカーに文字を入力
トム

今回は「sample」と入力。

STEP
リンク元のテキスト(スタート位置)を選択
STEP
リンクボタンをクリック
STEP
リンクを作成

先ほどHTMLアンカーに入力した文字の頭に「#」をつけてリンクを作成します。

今回であれば、

トム

#sample」と入力します。

STEP
設定完了

お疲れ様でした。

ページ内リンクの設定は以上です。

プレビューで、実際にジャンプできるか確認しておきましょう。

SWELLのスムーススクロールについて

SWELLの最初の設定では、ジャンプ先へスクロールしながら移動する「スムーススクロール」機能がONになっています。

スムーススクロールは、「SWELL設定」 》「機能停止」 》「スムーススクロールを停止する」でONとOFFの切り替えが可能です。

スムーススクロールって何?

トム

下記に用意した2つの動画で確認してみてください。

「知ってるよ!」て方は、こちらからジャンプして読み進めてもらってOKです。

OFFの状態

ONの状態

ちなみにですが、

スムーススクロール機能のONとOFFは、好みの問題なのでどちらの設定でも特に問題ありません。

トム

自分の好きな方で大丈夫です。

SWELLで別記事の途中にリンクを設定する方法

ジャンプ先を別記事の途中に設定することも可能です。

その場合は、移動させたい「ページのURL」/#「HTMLアンカーの文字列」でリンクを作成しましょう。

下記を例にすると、

  • ページのURL:https://www.tomublog.site/blog-page-view/
  • HTMLアンカーの文字列:abc

リンクの作成は、「https://www.tomublog.site/blog-page-view/#abc」となります。

こちらから別記事の途中に移動します。

まとめ:SWELLでページ内リンクを設置する方法

本記事は、SWELLを使ったページ内リンクの設置方法について解説してきました。

きっと、

トム

思ってたより簡単でしたよね。

ページ内リンクを上手く活用すれば、ユーザーさんにとって優しい記事となるので、ユーザビリティに繋がります。

ぜひ、これからのブログ運営にお役立てください。

内部リンクをブログカードで設置したい方は⇩

以上、最後までお付き合いありがとうございました。

*ジャンプ先

こんな感じですね。

戻る

記事タイトルとイラスト画像

この記事が気に入ったら
いいねしてね!

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