Tech Bytes

短くて分かりやすい技術情報を記事として共有します。みなさんにとって学びになれば幸いです。

wordpressでアンカーリンクの設置方法

アンカーリンクとは

アンカーリンク(Anchor Link)は、ウェブページ内で他の場所へのリンクを作成するために使用されるHTML要素です。
通常、アンカーリンクはテキストや画像などの要素に設定され、ユーザーがクリックすることで特定の場所にスクロールしたり、他のページに移動したりすることができます。

アンカーリンクは通常、次のような形式で作成されます:

<a href="#target">リンクテキスト</a>

ここで、「#target」はリンク先の場所を示すアンカーの名前であり、「リンクテキスト」は実際に表示されるリンクのテキストです。
アンカーリンクをクリックすると、ブラウザーはそのアンカー名を持つ場所に自動的にスクロールします。
また、アンカーは他のページにも設定できます。
その場合、URLに「#target」のようなアンカー名を含めることで、目的のページの特定の場所に直接ジャンプすることができます。

wordpressでアンカーリンクの設定方法

WordPressでアンカーリンクを設定する方法は比較的簡単です。
以下に手順を示します:

1. リンク先の場所にアンカーを設定する:
ページや投稿の編集画面で、リンク先の場所にアンカーを設定します。
これを行うには、次の手順に従います:

  • 編集画面で、リンク先のテキストや画像を選択します。
  • リンク挿入/編集ツールバーを使ってリンクを挿入するか、もしくはHTMLエディターでリンクを編集します。
  • リンクのURLに、アンカー名を含めます。

例えば、#section1といった具合です。
これにより、リンク先の場所にアンカーが設定されます。

2. リンク元の作成:
アンカーリンクを設定するためのテキストやボタンを作成します。

  • テキストブロックを使用して、テキストを挿入します。

例えば、「先頭に戻る」といったテキストです。

  • あるいは、ボタンブロックを使用して、ボタンを挿入します。

3. アンカーリンクの設定:
リンク元のテキストやボタンを選択し、リンクを挿入または編集します。

  • リンクのURLに、先程設定したアンカー名を含めます。

例えば、#section1といった具合です。

4. 変更を保存する:
ページや投稿の編集を完了したら、変更を保存して、プレビューまたは公開します。

これで、WordPressサイトでアンカーリンクを作成する準備が整いました。
訪問者がリンクをクリックすると、指定したアンカーに自動的にスクロールします。