ページジャンプを作成する

ページジャンプ (アンカーリンクまたはジャンプリンクとも呼ばれます) とは、リンクをクリックすると即座に長いページの上部または下部に移動する機能です。右側の「目次」はページジャンプの例です。

ページジャンプは、ページ内のあるセクションにリンクするのに最適な方法です。サイト訪問者がクリックすると、長いページのある部分から同じページの別の部分に移動できます。

例えば、ページの上部にセクション名のリストがあるとします。それぞれのセクション名をページ下部の関連セクションにリンクさせると、訪問者は興味のある特定情報に関するセクションにジャンプできるようになります。その後、読者をページの先頭にある全セクションの元リストにリンクで直接戻すことができます。

この動画の言語は英語です。
YouTube には、自分の言語で視聴できる自動翻訳機能があります。

自動翻訳字幕を表示するには：

1. 動画を再生します。
2. 動画右下の ⚙️ 設定 アイコンをクリックします。
3. 字幕/CC を選択します。
4. 自動翻訳 を選択します。
5. 希望する言語を選びます。

自動吹き替え（実験機能）で視聴するには：

1. ⚙️ 設定 アイコンをクリックします。
2. 音声トラック を選択します。
3. 視聴したい言語を選びます。

ℹ️ 翻訳と吹き替えは Google により自動生成されるため、正確でない場合があります。また、自動吹き替えは現在テスト中で、すべての言語で利用できるわけではありません。注: 字幕の文章は Google 翻訳で生成されるため、完全とはいえませんが、内容の把握に役立ちます。

まず、読者がページジャンプをクリックしたときにジャンプする先のセクションを選択することから始めます。これを行うには、ジャンプ先のブロックに「アンカー」と呼ばれるものを作成します。

1. アンカーを追加するブロックをクリックします。段落、見出し、画像、カラム、ボタンなどの多くの一般的なブロックがアンカーをサポートしています。
2. 右側のサイドバーでブロックの設定を表示します。右側にサイドバーが表示されない場合、右上の「設定」アイコンをクリックして設定を表示させます。幅の異なる2つのカラムから成る正方形のアイコンです。

3. ブロック設定の下部で、「高度な設定」をクリックします。
4. 「HTML アンカー」ボックスに単語を入力します。これがアンカーになります。ページ上の他の場所でアンカーとして使用されていない、固有の単語を使用してください。複数の単語を使用する場合は、単語の間にハイフン (-) が自動的に挿入されます。例: two-words

次に、ページジャンプリンク自体を作成します。訪問者はこれをクリックして、ステップ1で作成したセクションに移動します。

1. テキストを入力するか、読者がクリックする画像、ボタン、ナビゲーションメニュー項目を追加します。
2. テキスト、画像、ボタン、メニュー項目のいずれかを選択し、ブロックのツールバーのリンクオプションをクリックします。リンクオプションは以下に強調表示されているとおり、鎖の輪のようなアイコンです。
   
3. ステップ1で作成した HTML アンカーを入力します。アンカーはハッシュタグ (#) マークから始めます。例えば、create-a-page-jump というアンカーを作成した場合、#create-a-page-jump というリンクを入力します。
4. エディターの右上隅にある「保存/更新/公開」をクリックして、変更を保存します。

これで完了です。公開ページでリンクをテストして、ステップ2で作成したリンクによってステップ1で作成したアンカーに誘導されることを確認できます。固定ページまたは投稿をプレビューしている場合、ページジャンプリンクが機能しないため、公開されたバージョンでテストするようにしてください。

ナビゲーションメニューからページ内の特定の部分にリンクするページジャンプを作成できます。これは、ホームページのスクロールが長いサイトで一般的です。ページジャンプを使用すると、訪問者が希望するホームページのセクションを簡単に表示できます。

1. まずは、ジャンプ先としてアンカーを作成することから始めます。
2. メニューで、カスタムリンクとなる新しい項目を追加します。
3. 「テキスト」フィールドに、メニュー項目の名称を入力します。これはページジャンプには影響しません。
4. 「URL」フィールドに、冒頭にハッシュタグ (#) 記号を付けたアンカーを入力します。

#my-anchor のようなページジャンプは、アンカーが設置されている同じページでのみ機能することに留意してください。別のページのセクションにジャンプする場合は、このガイドの次のセクションを参照してください。

ページジャンプは、同じページ内のセクションにリンクする以外にも使用できます。ページジャンプを使用して、あるページから別のページの特定エリアにリンクすることが可能です。

違いは、上述のステップ2でリンクに #create-a-page-jump と入力した方法のようにアンカーにリンクするのではなく、ページ全体の URL とアンカーにリンクすることです。

例えば、ページの URL が以下だとします。

https://yourgroovydomain.com/example/

そのページに unique-identifier というアンカーを作成する場合、ジャンプリンク全体は次のようになります。

https://yourgroovydomain.com/example/#unique-identifier

ページの先頭に戻るジャンプリンクを作成するには、次の手順を実行します。

1. ページの先頭のブロックにアンカーを追加します。
2. ページを下に移動し、「先頭に戻る」や「最初にジャンプ」などのテキストを入力します。
3. アンカーにそのテキストをリンクします。