※当サイトにはプロモーションが含まれています。
このサイトをご覧になった方から、お問い合わせをいただきました。
読者 ワードプレスでサイトを作っているのですが、目次の見出しみたいに、同じページの中でクリックするとその場所に移動するようにしたいです。
にゃテック 説明するにゃ。
ページ内リンクは、同一ページ内の好きな場所にリンクを設置して、クリックで移動できるようにする機能です。
なお、ページ内リンクは別名「アンカーリンク」とも言われていて、サイトのユーザビリティ向上やナビゲーションの強化につながり、SEOの観点からも有効とされています。
そのため、ワードプレス（WordPress）のブロックエディタでは、「アンカーリンク」や「HTMLアンカー」を利用することで、ページ内リンクを簡単に設定できます。
今回は、その方法について解説します。
ブロックエディタでページ内リンク(アンカーリンク)を作成する
ワードプレスのブロックエディタで、ページ内リンク（アンカーリンク）を作成する方法についてです。
作成例の画像は、SWELL（スウェル）を使用していますが、基本的な手順はGOLD BLOG（ゴールドブログ）やJIN（ジン）など、他のテーマでも共通です。
①アンカーリンクの作成
リンクにしたい文章を選択して、リンクのアイコンを選択します。
アンカーリンクを設定する際は、「半角の#（シャープ）＋半角英数字」で作成します。たとえば、
#link-titleのように記載します。
上記の画像例では、#copy-dode がアンカーリンクになっています。
②アンカーの作成
リンク先となるアンカーを作成します。
まず、リンク先にしたいブロック（ここでは見出しブロックなど）を選択します。
続いて、右側のサイドバーにある「高度な設定」を開き、「HTMLアンカー」の欄に任意のテキストを入力してください。
ここでは例とした「copy-code」と入力しました（アンカーの方の設定には、#（シャープ）は不要です）。
にゃのらいと これで完成だにゃ
【補足】別ページに飛ばすアンカーリンクの作成方法
アンカーリンクは、同一ページ内だけでなく、別記事や別ページに飛ばすことも可能です。
設定方法はシンプルで、リンク先の要素にHTMLアンカーを設定し、そのアンカー名をURLの末尾に追加します。
たとえば、別ページのURLが https://sample.com/page1/ で、アンカーが「copy-code」の場合、リンク先は以下のようになります。
https://sample.com/page1/#copy-codeリンクを作成したら、きちんと動作するか確認しておきましょう。
SWELLを効率的に学んで最速でサイトを作るには？
ワードプレステーマのSWELLを効率的に学んで、最速でサイトを作成するには、オンライン講座のUdemyで学ぶのが最適です。
「Udemy(ユーデミー)」は、世界中で人気のあるオンライン学習プラットフォームで、日本ではベネッセ（Benesse）と提携して運営をしています。
日本最大のオンライン学習のプラットフォームだけあって、ワードプレステーマのSWELLを学べる講座がいくつか用意されています。
※画像は講座へのリンクになっています
※画像は講座へのリンクになっています
なお、Udemyでは定期的にセールを開催しています。
セール時は通常価格より、90%以上の値引きされた価格で購入する事ができます。
新規受講生割引などがある場合もありますので、まずは公式サイトで確認してみてください。
