SWELLでページ内リンク（アンカーリンク）を作成したので、その方法をご紹介します。
SWELLはWordPressブロックエディタの機能を活かし、アンカーリンクやHTMLアンカーを使って、ページ内リンクを簡単に設定できるようになっています。
ページ内リンクは、サイト内のユーザビリティやナビゲーションを強化し、SEO対策としても有効なので、うまく活用してください。
ページ内リンク(アンカーリンク)とは
ページ内リンクとは、同一ページ内の好きな場所にリンクを設置して移動させる機能です。ページ内リンクは別名アンカーリンクとも言われます。
ページ内リンクの移動先はH2やH3などの見出しが多く、SWELLやCOCOONなどのブログテーマにある記事の目次もページ内リンクの一種で、クリックすると各見出しまで移動します。
HTMLで記述する場合は、aタグのhref属性と、hタグのid属性を利用します。
<a href="#linktest">見出しに飛ばす</a> <h2 id="linktest">リンク先の見出し</h2>
SWELLでページ内リンクを作成する
では、SWELLでページ内リンクを作成してみましょう。リンク先は見出しに設定します。
まずはリンク先にするブロックを選択します。見出しの好きな場所をクリックすれば選択できます。
ブロックを選択して、サイドバーの「高度な設定」を開きます。
「HTMLアンカー」にアンカーリンク用のテキストを入力してください。ここでは「linktest」としました。
アンカーリンクの設定
アンカーリンクを設置するテキストを反転、またはブロックを選択して「リンク」をクリックします。
頭に「#」を付けて、見出しの「HTMLアンカー」に入力したアンカーリンクのテキストを入力してください。ここは「#linktest」となります。
これでページ内リンクが完成しました。アンカーリンクを設定したテキスト「4つ目の見出しに進む」から、見出しへ飛ぶようになっています。
テキストをクリックすると、ちゃんと見出しに移動しました。ブロックエディタなら簡単にページ内リンクを作成できますよ。
別ページのページ内リンクを作成する
ページ内リンクは同一ページ内だけでなく、別記事や別ページに向けて作成することもできます。作成方法は簡単で、アンカーリンクのテキストに別ページのURLを追加するだけです。
まずはリンク先の見出しやブロックを選択して、サイドバーの「高度な設定」を開き、「HTMLアンカー」にアンカーリンク用のテキスト「linktest」を入力します。
続いて別ページに移動して、アンカーリンクを設置するテキストを反転させてから「リンク」をクリックして、記事のURL + # + アンカーリンクのテキストを入力します。
別ページのURLが「https://test.com/kiji01/」だった場合は、「https://test.com/kiji01/#linktest」となります。
リンクをクリックしたら、ちゃんと別ページに移動するかどうか確認しましょう。
ページ内リンクが飛ばない場合 idを確認
SWELLでページ内リンクを設定するときは、自動生成されるidと被ったり、見出しの増減でアンカーリンクのidが変わらないように注意してください。
特に目次のページ内リンクは、見出しを増減させるとidが変わってしまうので、アンカーリンクから正しく飛ばないというトラブルが発生します。
SWELLの目次で設定されているアンカーリンクは、上の見出しから「#index_id0」、「#index_id1」、「#index_id2」の番号順に並んでいます。
記事をリライトして見出しの順番を変えると、アンカーリンクの飛び先も変わってしまいます。別ページからリンクがある場合は、飛び先のidもチェックしてください。
SWELL ページ内リンクのスムーススクロールを止める
SWELLのデフォルト設定では「スムーススクロール」という機能が有効になっており、ページ内リンクをクリックすると、ページ内をスクロールしながら移動します。
スムーズスクロールを止める場合は、ダッシュボード左メニューの「SWELL設定」→上タブ「機能停止」に進み、「「スムーススクロール」を停止する」にチェックを入れてください。
これでページ内リンクから一気にリンク先へ移動させることができます。
SWELLのページ内リンクを活用しよう
SWELL内でページ内リンクを最適化すると、ユーザビリティやナビゲーションを強化することができます。
記事の内容が多いと、ページの途中を飛ばしたり、記事内の関連する項目だけ見たい場合が出てきますが、そんなときはページ内リンク（アンカーリンク）を使うと便利です。
SWELLではWordPressのブロックエディター機能を使って、ページ内リンク(アンカーリンク)を簡単に設置できます。ぜひ活用してください。
SWELLで見出しデザインと見出しの色を変更する方法は、以下の記事をご参照ください。
SWELL見出しデザイン変更 SWELL 見出しデザインと見出しの色を変更する
