ワードプレスでページ内ジャンプを設定する方法｜初心者向けに手順を解説

はじめに

ワードプレスで長い記事や固定ページを作成すると、「読者をページ内の特定の見出しへ移動させたい」と感じることがあります。そのようなときに便利なのが、ページ内ジャンプです。

ページ内ジャンプを設定すると、リンクをクリックした読者を「料金」「申込方法」「よくある質問」など、同じページ内の目的の場所へ直接移動させられます。長文記事の目次や、サービスページのCTAにも活用できる便利な機能です。

ワードプレスのブロックエディターでは、見出しなどにHTMLアンカーを設定し、リンク元に「#アンカー名」を入力するだけでページ内ジャンプを作成できます。基本的にはプラグインも必要ありません。WordPress.org+1

この記事では、ワードプレスでページ内ジャンプを設定する方法を初心者向けに解説します。ブロックエディターとクラシックエディターの操作方法に加え、別ページからジャンプさせる方法や、うまく動作しない場合の対処法も紹介します。

1. ワードプレスのページ内ジャンプとは？

ページ内ジャンプとは、リンクをクリックしたときに、同じページ内の指定した場所へ移動させる仕組みです。

「アンカーリンク」「ジャンプリンク」と呼ばれることもあります。

通常のリンクは別のページやWebサイトへ移動するために使いますが、ページ内ジャンプは長いページの途中にある見出しやコンテンツへ読者を案内するために使います。

1-1. ページ内ジャンプの基本的な仕組み

ページ内ジャンプは、次の2つを組み合わせて作成します。

1つ目は、読者がクリックする「リンク元」です。例えば、記事の冒頭にある目次の項目や、「料金を見る」というボタンがリンク元になります。

2つ目は、クリック後に移動する「ジャンプ先」です。料金表の見出しや、お問い合わせフォームなどが該当します。

ジャンプ先には、場所を識別するためのアンカー名を設定します。例えば、料金の見出しに「price」というアンカー名を設定した場合、リンク元には次のように入力します。

#price

リンクをクリックすると、ブラウザが「price」というアンカー名を探し、その位置まで画面を移動させます。

1-2. ページ内ジャンプを使う主な場面

ページ内ジャンプは、特に次のような場面で役立ちます。

  • 長文記事の目次から各見出しへ移動させる

  • サービスページの冒頭から料金表へ案内する

  • 「申し込む」ボタンから申込フォームへ移動させる

  • よくある質問の質問文から回答へ移動させる

  • ページ下部から先頭へ戻るリンクを設置する

  • 商品紹介から購入方法や注意事項へ案内する

読者がページを上から順番にスクロールしなくても、必要な情報へすぐ移動できることが大きなメリットです。

1-3. アンカーリンクと通常リンクの違い

通常リンクでは、次のようなURLを設定します。

https://example.com/service/

このリンクをクリックすると、「service」という別ページへ移動します。

一方、同じページ内の「price」という場所へ移動させるアンカーリンクは、次のように設定します。

#price

別ページ内の特定の場所へ移動させる場合は、通常のURLとアンカー名を組み合わせます。

https://example.com/service/#price

つまり、URLの「#」以降が、ページ内の移動先を指定する部分です。

2. ワードプレスでページ内ジャンプを設定する前に知っておくこと

ページ内ジャンプの設定自体は難しくありません。ただし、リンク元とジャンプ先の関係や、アンカー名の付け方を理解しておかないと、リンクが正しく動作しないことがあります。

ここでは、設定前に知っておきたい基本事項を確認しましょう。

2-1. ページ内ジャンプに必要な「リンク元」と「ジャンプ先」

ページ内ジャンプを作るには、必ずリンク元とジャンプ先が必要です。

例えば、ページの上部にある「お問い合わせはこちら」というテキストから、ページ下部のお問い合わせフォームへ移動させる場合は、次のように設定します。

  • リンク元：「お問い合わせはこちら」というテキスト

  • ジャンプ先：「お問い合わせ」という見出し

  • アンカー名：contact

  • リンク先：#contact

リンク元にはテキストだけでなく、ボタンや画像も使用できます。

また、ジャンプ先は見出しに設定するのが一般的ですが、HTMLアンカーに対応しているブロックであれば、段落やグループなどに設定できる場合もあります。ワードプレス公式ドキュメントでも、HTMLアンカーに対応したブロックをジャンプ先として利用できることが案内されています。WordPress.org+1

2-2. ジャンプ先に設定するHTMLアンカーとは

HTMLアンカーとは、ページ内の特定の要素を識別するために付ける名前です。

HTMLでは、次のようなid属性として出力されます。

HTML
<h2 id="contact">お問い合わせ</h2>

この見出しへ移動するリンクは、次のように記述します。

HTML
<a href="#contact">お問い合わせへ移動する</a>

ブロックエディターでは、HTMLコードを直接入力しなくても、ブロック設定にある「HTMLアンカー」の欄から設定できます。

見出しブロックには、詳細設定としてHTMLアンカーの入力項目が用意されています。WordPress.org

2-3. アンカー名を決めるときの注意点

アンカー名は自由に決められますが、次のルールを意識するとトラブルを防ぎやすくなります。

  • 半角英数字を使う

  • 空白を入れない

  • ページ内で重複させない

  • 短く意味の分かる名前にする

  • 記号はハイフンを中心に使う

  • 大文字と小文字を統一する

例えば、「サービスの料金」という見出しには、次のようなアンカー名が適しています。

service-price

反対に、次のような名前は避けたほうが安全です。

サービス 料金

日本語や空白を含むアンカー名でも動作する環境はありますが、URLエンコードやテーマ、プラグインとの組み合わせによって扱いにくくなる可能性があります。初心者は「price」「contact」「faq」など、半角英数字とハイフンを使うのがおすすめです。

3. ブロックエディターでページ内ジャンプを設定する方法

現在のワードプレスで一般的に使われているブロックエディターでは、画面右側の設定欄から簡単にページ内ジャンプを作成できます。

ここでは、「料金を見る」というテキストをクリックすると、「料金プラン」という見出しへ移動する例で解説します。

3-1. ジャンプ先の見出しにHTMLアンカーを設定する

最初に、移動先となる見出しへHTMLアンカーを設定します。

  1. ワードプレスの投稿または固定ページの編集画面を開く

  2. ジャンプ先にしたい見出しブロックを選択する

  3. 画面右上の設定アイコンをクリックする

  4. 「ブロック」タブを開く

  5. 「高度な設定」または「詳細設定」を開く

  6. 「HTMLアンカー」にアンカー名を入力する

「料金プラン」の見出しへ移動させる場合は、次のように入力します。

price

HTMLアンカー欄には「#」を付けません。

正しい入力：price
間違った入力：#price

設定項目の表示名や位置は、使用しているワードプレスのバージョンや画面構成によって多少異なることがあります。

3-2. リンク元のテキストにアンカーリンクを設定する

続いて、読者がクリックするテキストにリンクを設定します。

  1. リンク元にしたいテキストを選択する

  2. ブロックツールバーのリンクアイコンをクリックする

  3. リンク先に「#アンカー名」を入力する

  4. Enterキーを押すか、適用ボタンをクリックする

ジャンプ先に「price」と設定した場合、リンク先には次のように入力します。

#price

ジャンプ先のHTMLアンカーには「price」、リンク元には「#price」と入力する点が重要です。

例えば、HTMLでは次のような関係になります。

HTML
<a href="#price">料金を見る</a>

<h2 id="price">料金プラン</h2>

リンクを新しいタブで開く設定は、通常必要ありません。同じページ内を移動するだけなので、現在のタブで開く設定にしておきましょう。

3-3. 実際にページ内ジャンプできるか確認する

設定が終わったら、プレビュー画面で動作を確認します。

編集画面では、クリックしても正しくジャンプしない場合があります。そのため、次の手順で確認してください。

  1. 投稿または固定ページを保存する

  2. 「プレビュー」をクリックする

  3. 新しいタブで表示されたページを開く

  4. 設定したリンクをクリックする

  5. 目的の見出しまで移動するか確認する

公開済みの記事を編集した場合は、「更新」をクリックしたあとに実際のページでも確認しましょう。

リンクをクリックしたとき、ブラウザのアドレス欄が次のようになれば、アンカーリンクが認識されています。

https://example.com/article/#price

4. ボタンや画像からページ内ジャンプさせる方法

ページ内ジャンプのリンク元には、通常のテキストだけでなく、ボタンや画像も使用できます。

サービスページやランディングページでは、読者の目に入りやすいボタンをリンク元にすると効果的です。

4-1. ボタンブロックにページ内リンクを設定する

ボタンブロックからページ内ジャンプさせる手順は、次のとおりです。

  1. 編集画面でボタンブロックを追加する

  2. ボタンに「料金を見る」「申し込む」などの文字を入力する

  3. ボタンを選択する

  4. ツールバーのリンクアイコンをクリックする

  5. 「#アンカー名」を入力する

  6. リンクを適用する

ジャンプ先のアンカー名が「contact」であれば、ボタンのリンク先には次のように入力します。

#contact

ボタンブロックにはリンク設定機能があり、クリック時の移動先を指定できます。WordPress.org

設定後は、プレビュー画面でボタンをクリックし、お問い合わせフォームなどの目的の位置へ移動するか確認してください。

4-2. 画像にページ内リンクを設定する

画像をクリックしたときにページ内ジャンプさせることもできます。

  1. リンク元にする画像ブロックを選択する

  2. ブロックツールバーのリンクアイコンをクリックする

  3. リンク先に「#アンカー名」を入力する

  4. リンクを適用する

例えば、画像から「キャンペーン詳細」という見出しへ移動させる場合、見出しのHTMLアンカーを「campaign」とし、画像のリンク先を次のように設定します。

#campaign

画像だけではリンクであることが伝わりにくい場合があります。「画像をクリックすると詳細へ移動します」などの説明を添えると、読者が迷いにくくなります。

また、画像には内容を表す代替テキストも設定し、アクセシビリティに配慮しましょう。

4-3. CTAや目次にページ内ジャンプを活用する

ページ内ジャンプは、CTAや目次との相性がよい機能です。

CTAとは、「資料を請求する」「無料相談を申し込む」など、読者に行動を促す要素を指します。

例えば、記事の途中に次のようなボタンを配置します。

無料相談はこちら

リンク先を「#contact」に設定しておけば、ページ下部のお問い合わせフォームへ直接案内できます。

目次で使用する場合は、各項目に対応する見出しへアンカーを設定します。

料金について → #price
申込方法 → #application
よくある質問 → #faq

ただし、リンク先の名称は、移動後に表示される見出しの内容と一致させることが大切です。「詳しく見る」という曖昧な表現より、「料金プランを見る」のように移動先が分かる文言を使いましょう。

5. クラシックエディターでページ内ジャンプを設定する方法

クラシックエディターでは、テキスト編集画面でHTMLを記述してページ内ジャンプを設定します。

HTMLに慣れていない場合でも、決まった部分だけを変更すれば設定できます。

5-1. ジャンプ先にid属性を追加する

最初に、ジャンプ先となる見出しへid属性を追加します。

クラシックエディターの「テキスト」タブを開き、対象の見出しを探します。

変更前の見出しが次のようになっているとします。

HTML
<h2>料金プラン</h2>

「price」というアンカー名を設定する場合は、次のように変更します。

HTML
<h2 id="price">料金プラン</h2>

id="price"が、ジャンプ先を識別する部分です。

見出し以外の要素にも設定できます。

HTML
<div id="contact">
  お問い合わせフォーム
</div>

ただし、ページ構成を分かりやすくするため、基本的には見出しへ設定する方法がおすすめです。

5-2. リンク元に「#アンカー名」を設定する

次に、リンク元となるテキストへアンカーリンクを設定します。

HTMLで記述する場合は、次のようになります。

HTML
<a href="#price">料金プランを見る</a>

クラシックエディターのビジュアル画面から設定する場合は、次の手順です。

  1. リンクを設定したい文字を選択する

  2. リンクの挿入ボタンをクリックする

  3. URL欄に「#price」と入力する

  4. 適用ボタンをクリックする

ジャンプ先とリンク元を並べると、次のようになります。

HTML
<a href="#price">料金プランを見る</a>

<h2 id="price">料金プラン</h2>

5-3. HTML編集が不安な初心者向けの注意点

HTMLを編集するときは、必要な部分以外を削除しないように注意してください。

特に、次の記号が抜けると表示が崩れる可能性があります。

< > " =

正しい記述は次のとおりです。

HTML
<h2 id="price">料金プラン</h2>

次のような記述は正しくありません。

HTML
<h2 id=price>料金プラン</h2>
<h2 id="price>料金プラン</h2>

編集前に下書き保存を行い、変更後は必ずプレビューで表示を確認しましょう。

また、ビジュアル画面とテキスト画面を何度も切り替えると、環境によってはHTMLが自動調整されることがあります。設定後にid属性が残っているかも確認してください。

6. 別ページから特定の場所へジャンプさせる方法

ページ内ジャンプは、同じページ内だけでなく、別ページの特定の見出しへ移動させることもできます。

例えば、ブログ記事からサービスページの料金表へ直接案内する場合に便利です。

6-1. 別ページ内の見出しへジャンプする仕組み

別ページの特定の場所へ移動させる場合も、ジャンプ先にHTMLアンカーを設定する方法は同じです。

例えば、サービスページにある「料金プラン」という見出しへ、次のアンカー名を設定します。

price

そのうえで、リンク元にはサービスページのURLとアンカー名を組み合わせて設定します。

https://example.com/service/#price

リンクをクリックすると、最初にサービスページが開き、その後「price」が設定された位置へ移動します。

ワードプレス公式ドキュメントでも、別ページに設定されたアンカーへリンクできることが案内されています。WordPress.org+1

6-2. URLの末尾に「#アンカー名」を付ける方法

別ページへのアンカーリンクは、基本的に次の形式で作成します。

ページのURL#アンカー名

ページURLの末尾にスラッシュがある場合は、スラッシュの後ろにアンカー名を付けます。

https://example.com/service/#contact

スラッシュがないURLの場合は、次の形式です。

https://example.com/service#contact

ワードプレスのパーマリンク設定によってURLの形が異なるため、実際に公開されているページのURLをコピーしてから「#アンカー名」を追加すると確実です。

6-3. 固定ページや投稿ページで使う場合の例

例えば、固定ページのURLが次のとおりだとします。

https://example.com/company/

このページ内の「アクセス」という見出しに「access」というアンカー名を設定した場合、別の投稿ページから設定するリンクは次のとおりです。

https://example.com/company/#access

お問い合わせページのフォームへ移動させる場合は、次のように設定できます。

https://example.com/contact/#form

同じドメイン内であれば、相対URLを使う方法もあります。

/contact/#form

ただし、初心者はURLの入力ミスを防ぐため、公開ページから完全なURLをコピーして使う方法がおすすめです。

7. ページ内ジャンプができないときの原因と対処法

設定したページ内ジャンプが動作しない場合は、アンカー名やリンク先の入力を確認しましょう。

多くの場合、簡単な入力ミスや設定の重複が原因です。

7-1. アンカー名とリンク先が一致していない

最も多い原因は、ジャンプ先のアンカー名とリンク元の文字列が一致していないことです。

例えば、ジャンプ先が次の設定になっているとします。

contact

この場合、リンク元は次のように設定する必要があります。

#contact

次のように文字が異なると動作しません。

ジャンプ先：contact
リンク元：#contacts

ハイフンや数字、大文字と小文字も含めて、同じ文字列になっているか確認してください。

コピーして貼り付けると、入力ミスを防ぎやすくなります。

7-2. 「#」の付け忘れや入力ミスがある

リンク元には、アンカー名の先頭に半角の「#」が必要です。

正しいリンク先：#price
間違ったリンク先：price

反対に、ジャンプ先のHTMLアンカー欄には「#」を付けません。

正しいアンカー名：price
間違ったアンカー名：#price

また、全角の「＃」を入力すると正常に動作しない可能性があります。必ず半角の「#」を使用してください。

7-3. 同じアンカー名を複数使っている

同じページ内で、同一のアンカー名を複数の場所に設定しないようにしましょう。

例えば、2つの見出しにどちらも「price」を設定すると、ブラウザが意図した場所へ移動できない可能性があります。

料金プラン：price
追加料金：price

それぞれ次のように異なる名前を付けます。

料金プラン：price
追加料金：additional-price

アンカー名は、ページ内で重複しない固有の文字列にすることが重要です。

7-4. テーマやプラグインの影響で動作しない

入力内容が正しいにもかかわらず動作しない場合は、テーマやプラグインの影響が考えられます。

特に、次のような機能を持つプラグインを確認してください。

  • スムーススクロールを追加するプラグイン

  • 目次を自動生成するプラグイン

  • ページ表示を高速化するプラグイン

  • JavaScriptを最適化するプラグイン

  • ページビルダー系プラグイン

原因を確認するときは、バックアップを取ったうえで、影響が疑われるプラグインを一時的に停止します。

テーマを変更して確認する方法もありますが、公開中のサイトで直接変更するとレイアウトが崩れる可能性があります。可能であれば、ステージング環境やテスト環境で検証しましょう。

7-5. キャッシュが原因で反映されない

アンカー名やリンクを修正しても古い設定が表示される場合は、キャッシュが残っている可能性があります。

次のキャッシュを順番に削除してください。

  • ブラウザのキャッシュ

  • キャッシュプラグインのキャッシュ

  • レンタルサーバーのキャッシュ

  • CDNのキャッシュ

ブラウザでは、シークレットモードでページを開くと、キャッシュの影響を受けにくい状態で確認できます。

記事を更新したあと、URLの末尾に正しいアンカー名を直接入力して動作を確認する方法も有効です。

https://example.com/article/#faq

このURLで目的の見出しへ移動する場合、ジャンプ先は正しく設定されています。リンク元の設定を中心に見直しましょう。

8. ページ内ジャンプを設定するときのSEO・ユーザー体験のポイント

ページ内ジャンプは、設定するだけで検索順位が上がる機能ではありません。しかし、読者が必要な情報を見つけやすいページを作ることで、サイトの使いやすさを高められます。

SEOだけを目的にするのではなく、読者の行動を考えて設置することが重要です。

8-1. 読者が知りたい情報へすぐ移動できる構成にする

ページ内ジャンプは、読者が探している情報へ短時間で到達できるように設計しましょう。

例えば、「ワードプレスのページ内ジャンプが動かない」という悩みを持つ読者は、基本的な仕組みよりもトラブルの解決方法を先に読みたい可能性があります。

記事の冒頭に目次があれば、「ページ内ジャンプができないときの原因と対処法」へ直接移動できます。

一方で、リンク先が読者の予想と異なると、かえって使いにくくなります。

リンク元：設定方法を見る
リンク先：料金表

このような不一致は避け、リンクの文言から移動先を予測できるようにしましょう。

8-2. 目次や見出しと組み合わせて使う

長文記事では、見出しとページ内ジャンプを組み合わせた目次が効果的です。

目次には、記事内の主要な見出しを過不足なく掲載します。細かい見出しをすべて並べると目次が長くなり、かえって目的の情報を探しにくくなることがあります。

基本的には、H2見出しを中心に掲載し、必要に応じて重要なH3見出しを追加するとよいでしょう。

見出しの文言を変更する可能性がある場合でも、アンカー名はできるだけ維持します。公開済みページのアンカー名を変更すると、以前のリンクが機能しなくなるためです。ワードプレスのドキュメント制作ガイドでも、既存リンクを壊さないために公開済みのアンカーを維持する考え方が示されています。Make WordPress

8-3. ページ内ジャンプを入れすぎない

ページ内ジャンプは便利ですが、すべての文章や画像に設定する必要はありません。

リンクが多すぎると、読者がどこをクリックすべきか迷ったり、ページ全体が読みにくくなったりします。

優先して設定したい場所は、次のとおりです。

  • 記事の目次

  • 重要な申込ボタン

  • 料金表への案内

  • お問い合わせフォームへの案内

  • よくある質問

  • ページ先頭へ戻るリンク

読者の移動を助ける目的がある場所に限定して使いましょう。

8-4. スマホ表示でも使いやすいか確認する

スマートフォンでは画面が小さいため、パソコンよりもページ内ジャンプの重要性が高くなります。

設定後はスマホ表示で次の点を確認してください。

  • リンクやボタンを指で押しやすいか

  • 目次が長くなりすぎていないか

  • ジャンプ後に見出しが画面内に表示されるか

  • 固定ヘッダーに見出しが隠れないか

  • 意図しない場所へ移動しないか

ボタン同士の間隔が狭いと、別のリンクを誤って押す可能性があります。十分な余白を確保しましょう。

9. ワードプレスのページ内ジャンプに関するよくある質問

9-1. プラグインなしでもページ内ジャンプは設定できる？

ワードプレスの標準機能だけで設定できます。

ブロックエディターでは、ジャンプ先の見出しにHTMLアンカーを設定し、リンク元に「#アンカー名」を入力するだけです。

例えば、ジャンプ先に「faq」というHTMLアンカーを設定した場合、リンク元は次のようにします。

#faq

目次を自動生成したい場合や、スクロールの動きを細かく調整したい場合はプラグインが役立つこともありますが、通常のページ内ジャンプだけであれば必須ではありません。

9-2. 日本語のアンカー名は使える？

日本語のアンカー名でも動作する場合はあります。

ただし、日本語がURL上で変換されて長い文字列になったり、コピーしたURLが分かりにくくなったりすることがあります。

テーマやプラグイン、外部サービスとの互換性も考えると、次のような半角英数字を使う方法がおすすめです。

price
contact
faq
application
service-flow

日本語の見出しであっても、アンカー名まで日本語にする必要はありません。

9-3. ページ内ジャンプがずれるときはどうすればいい？

ジャンプ後の見出しが固定ヘッダーに隠れる場合、CSSでスクロール位置を調整できます。

例えば、見出しに設定されたアンカーへ移動した際に100ピクセルの余白を確保する場合は、次のようなCSSを使用します。

CSS
h2[id],
h3[id] {
  scroll-margin-top: 100px;
}

追加する数値は、固定ヘッダーの高さに合わせて調整してください。

CSSは、使用しているテーマの追加CSS機能や子テーマなどに記述します。テーマによって適切な追加場所が異なるため、変更前にバックアップを取りましょう。

スムーススクロール系のプラグインを使用している場合は、プラグイン側に位置調整の設定がないか確認してください。

9-4. 目次プラグインとの違いは？

ページ内ジャンプは、ページ内の特定の位置へ移動する仕組みそのものです。

一方、目次プラグインは記事内の見出しを検出し、ページ内ジャンプを含む目次を自動生成する機能です。

手動設定では、次の作業を自分で行います。

  • 見出しにアンカー名を設定する

  • 目次の項目を作成する

  • 各項目にリンクを設定する

目次プラグインでは、これらの作業を自動化できる場合があります。

記事数が少なく、目次の内容を細かく調整したい場合は手動でも対応できます。多数の記事に統一した目次を表示したい場合は、目次プラグインを検討するとよいでしょう。

9-5. ページ内ジャンプはSEOに効果がある？

ページ内ジャンプを設定しただけで、検索順位が直接上がるとは限りません。

ただし、ページ内ジャンプによって読者が必要な情報を見つけやすくなれば、ユーザー体験の改善につながります。

特に長文記事では、目次から各見出しへ移動できることで、読者が不要な部分を何度もスクロールする必要がなくなります。

SEOを意識する場合も、アンカーリンクを増やすこと自体を目的にせず、次の点を重視しましょう。

  • 見出しだけで内容が分かる構成にする

  • 目次と本文の見出しを一致させる

  • リンク先が分かる文言を使う

  • 読者にとって重要な場所だけに設置する

  • パソコンとスマホの両方で動作を確認する

ページ内ジャンプは、良質な本文や分かりやすい見出し構成を補助する機能として活用することが大切です。

まとめ

ワードプレスのページ内ジャンプは、リンクをクリックした読者を同じページ内の特定の見出しやコンテンツへ移動させる機能です。

ブロックエディターでは、次の手順で設定できます。

  1. ジャンプ先の見出しを選択する

  2. 詳細設定の「HTMLアンカー」にアンカー名を入力する

  3. リンク元のテキストやボタンを選択する

  4. リンク先に「#アンカー名」を入力する

  5. プレビュー画面で動作を確認する

ジャンプ先のHTMLアンカーには「#」を付けず、リンク元には「#」を付けることがポイントです。

ジャンプ先：contact
リンク元：#contact

別ページの特定の場所へジャンプさせる場合は、ページのURLの末尾に「#アンカー名」を追加します。

https://example.com/contact/#form

正しく動作しない場合は、アンカー名の不一致、半角の「#」の付け忘れ、アンカー名の重複、キャッシュ、テーマやプラグインの影響を確認してください。

ページ内ジャンプを目次やCTAに活用すれば、長い記事や固定ページでも読者を目的の情報へ案内しやすくなります。設置しすぎには注意しながら、読者が知りたい情報へすぐ移動できるページを作りましょう。