今回はSWELLでページ内リンク（アンカーリンク）を使う方法を解説します。なおWordPressのブロックエディタであれば、SWELL以外でも応用が可能です。
方法論としては、飛び先に任意のアンカー（id）を設定して、そのidに対してリンクを貼るだけの作業です。
設定方法をわかりやすく解説したほか、実際に使うシチュエーション例もいくつかご紹介しますので、サイト運営にお役立てください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
ページ内リンク（アンカーリンク）とは
ページ内リンク（アンカーリンク）とは、ページ内の任意の場所が飛び先に設定されたリンクです。同じページ内のリンクはもちろん、別のページから任意のページの任意の場所へ飛ぶリンクも、同様の名称で呼ばれます。
たとえば「このリンク」をクリックすると、少しだけ上に戻ります。
上記例では「ページ内リンク（アンカーリンク）とは」の見出しに「modoru」というHTMLアンカー（id）を設定して、リンク先にしていました。
ページ内リンク（アンカーリンク）の仕組み
ページ内リンクには、HTMLに設定できる属性の「id」を利用しています。
idは、同じページの中では同じ名前のidを一つしか使えない特性をもっています。一つのリンクに対して複数の飛び先があると混乱しますから、ページ内リンクにはidの特性がとても役に立ちます。
そんなページ内リンクがWebサイトで主につかわれる場面は「目次」です。SWELLでは目次が自動生成されますが、ページ内の見出しに自動で連番の「id」を付与して、そこに向けてページ内リンクを設定する仕組みになっています。
【SWELL】ページ内リンク（アンカーリンク）の作り方
それでは、SWELLでページ内リンクを作る方法を解説していきます。
なお「アンカー」と「id」はだいたい同じ意味で使っていきますので、あまり深く考えず手順どおりに進めてください。
アンカー（id）の設定方法
まずは飛び先の「アンカー」となるidを設定するところから始めましょう。
飛び先として設定したい画像やテキストなどをクリックして、サイドバー最下部の「高度な設定」へ。「HTMLアンカー」の項目に、idとして設定したい文字列を入力します。
上記画像では、飛び先にする見出しに対して tobuzo というアンカーを設定しました。
なお設定するidは英数字でも平仮名でも漢字でも構いませんが、全角文字は油断すると文字化けする懸念がありますので、基本的には英数字にしておくのが自然です。
同じページ内のアンカー（id）へのリンク設定方法
同じページ内に作成したアンカーへのリンクを設定するには、いつもリンクを設置する手順で「#アンカーに指定した文字列」を指定するだけです。
上記画像では「tobuzo」というidに対してリンクを貼るため「#tobuzo」を設定しました。
ちなみに#は、idであることを示す記号です。CSSでも任意のidを指定するときは#を使いますので、覚えておくと役立つかもしれません。
別のページにあるアンカー（id）へのリンク設定方法
アンカーリンクは、別のページにあるものに対しても設定できます。「ページURL/#アンカーに指定した文字列」とリンクを設定するだけ。
上記画像では「https://www.fumitei.jp」のページ内にある「dokoka」というアンカーに対してリンクを貼るために「https://www.fumitei.jp/#dokoka」を指定しています。
- 架空のアンカーですので、実際には飛べません。
ページ内でもページ外でも、任意に設定したアンカーへとリンクさせられる便利な機能です。
SWELLでページ内リンクのスムーススクロールを制御する方法
SWELLのデフォルト設定では、ページ内リンクを踏むと飛び先へとスクロールしながら移動する「スムーススクロール」という機能がONになっています。
スムーススクロールの機能を切りたい場合は「SWELL設定→機能停止」にある「スムーススクロールを停止する」をONにして下さい。するとページ内リンクを踏んだあと、スクロールせず一瞬で飛び先へと移動する挙動になります。
これは好みの問題ですので、好きな方を選んでください。
ページ内リンク（アンカーリンク）が役立つシチュエーション
ブログやWebサイトを運営していく中で、実際にページ内リンクが役立つシチュエーションもご紹介しておきます。
比較表から詳細見出しへリンクする
複数の商品を掲載して紹介する「比較記事」に掲載する比較表では、よくページ内リンクを使います。
商品について詳細に解説している見出しにアンカーを設定して、比較表に掲載している商品名からリンクを貼るような形です。ユーザビリティが良くなりますし、ヒートマップツールで見てもクリック率の高いポイントです。
例えば当サイトにある「電子書籍読み放題サービス」の比較記事でも多用していますので、よろしければ参考にしてみてください。
詳細な出典項目を示す
別ページやサイトにあるなんらかの情報を出典元として表記するときに、その該当箇所へとピンポイントでリンクを貼りたい場合もページ内リンクが役立ちます。
例えば当サイトには出典や引用について解説した記事がありますが、記事中で「引用のルール」や「参考のルール」などを見出しに分けて解説しています。ピンポイントで参考のルールについて解説したいときに、該当の見出しへアンカーをつけてリンクすると便利です。
上記「出典や引用について解説した記事」に設定したリンクには「https://www.fumitei.jp/how-to-write-the-source/」を。「参考のルール」につけたリンクには「https://www.fumitei.jp/how-to-write-the-source/#sankou」を設定しています。
このように、よりピンポイントな箇所を指し示したい場合などに使い分けてみてください。
ページ内リンク（アンカーリンク）を作る際の注意点
最後に、ページ内リンクを設定するときの注意点についてもお伝えしておきます。
自動生成されるidと被らないよう注意
ページ内で同じ名前のidは一つしか設定できません。もし複数設定してしまうと、どちらか片方にだけ飛ぶ挙動になってしまいます。
目次やその他プラグイン、テーマの機能で自動生成されるidとは被らないように注意しておきましょう。
目次生成idは見出し順が変わると飛び先が変わる
目次などで自動生成されたidは、記事内容が変わると変動する可能性があることに注意しておきましょう。
ちなみにSWELLの目次で生成されるアンカーは、一番上の見出しが「#index_id0」からはじまり、h2やh3は区別せず連番が振られていきます。
仮に「#index_id3」（3番目の見出し）に向けてリンクを貼っていた場合、その記事をリライトして見出しの順番が変わったりすると、飛び先が別の見出しになってしまいます。
とくに別のサイトのページ内にあるアンカーを指定する場合などは、自動生成されたものでないか注意しておくことをおすすめします。
ページ内リンクでユーザビリティを上げてみて
ページ内リンクを適切に使うと、読者にとって利便性の良いページに近づきます。
欲しい情報にすぐ辿り着けるのは良いページですから、ぜひ適切にページ内リンクを活用してみてください。
