今回は
記事内で読みたい場所にジャンプするのってどうやるの？
ページ内リンクなんて難しそうだなぁ…。
そんな悩みを解決していきます。
- 有料テーマ「SWELL」のユーザーさん
- ブログ初心者さん
- ページ内リンク（アンカーリンク）の設置方法が知りたい人
記事内の読みたい場所へジャンプするリンクの設置方法は「超簡単」なので、ブログ初心者さんでも本記事を読み進めていただければ簡単にできちゃいます。
難しい言葉は一切使わずに、できるだけわかりやすく解説していくので、ぜひ最後まで読んでいってください。
また、自分のサイトも開いて読みながら一緒に作業すると、より理解が深まるのでおすすめです。
それでは、早速本題に参りましょう。
ページ内リンクとは
ページ内リンクとは、同じページ内の指定した場所へジャンプするリンクのことで、「アンカーリンク」、「記事内リンク」も同じ意味で使われます。
ページ内リンクを使うことで、ユーザーさんが必要とする情報まで瞬時に辿り着ける便利な機能です。
例えば、キャンプについての記事の場合、テントをすでに購入しているユーザーさんにとっては、「おすすめのテント情報」は必要ありませんよね。
そんな時は、ページ内リンクを使って必要な情報までジャンプしてもらうことで、記事が読みやすくなります。
トム実際に使ってみてください。
次のリンクをクリックすると、記事の１番下まで「ジャンプ」します。
SWELLでページ内リンクを設定する方法
それでは、
トムページ内リンクを一緒に設置していきましょう。
トム今回は「sample」と入力。
先ほどHTMLアンカーに入力した文字の頭に「#」をつけてリンクを作成します。
今回であれば、
トム「#sample」と入力します。
お疲れ様でした。
ページ内リンクの設定は以上です。
プレビューで、実際にジャンプできるか確認しておきましょう。
SWELLのスムーススクロールについて
SWELLの最初の設定では、ジャンプ先へスクロールしながら移動する「スムーススクロール」機能がONになっています。
スムーススクロールは、「SWELL設定」 》「機能停止」 》「スムーススクロールを停止する」でONとOFFの切り替えが可能です。
スムーススクロールって何？
トム下記に用意した２つの動画で確認してみてください。
「知ってるよ！」て方は、こちらからジャンプして読み進めてもらって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を使ったページ内リンクの設置方法について解説してきました。
きっと、
トム思ってたより簡単でしたよね。
ページ内リンクを上手く活用すれば、ユーザーさんにとって優しい記事となるので、ユーザビリティに繋がります。
ぜひ、これからのブログ運営にお役立てください。
内部リンクをブログカードで設置したい方は⇩
以上、最後までお付き合いありがとうございました。
＊ジャンプ先
こんな感じですね。
