WordPressページ内リンクの設定方法!ブロックエディタで簡単

WordPressページ内リンクの設定方法!ブロックエディタで簡単

「長文記事の目次から、該当する見出しへジャンプさせたい」
「記事の途中に『お問い合わせはこちら』ボタンを置いて、ページ下部のフォームへ誘導したい」

WordPressでブログやWebサイトを運営していると、このように「同じページ内の特定の場所へリンクを飛ばしたい」と思う場面が多々あります。これをページ内リンク(アンカーリンク)と呼びます。

ページ内リンクを適切に設置することで、読者は知りたい情報へすぐにアクセスできるようになり、ユーザビリティ(使いやすさ)が向上します。結果として、記事の離脱率低下や、お問い合わせなどのコンバージョン率(CV率)アップにもつながります。

この記事では、HTMLやCSSの専門知識がない初心者の方でも迷わず設定できるよう、WordPressのブロックエディタ(Gutenberg)を使ったページ内リンクの設定手順を画像付きでわかりやすく解説します。

目次

記事制作数1億本以上、取引社数5,300社超の実績

豊富な制作実績と蓄積されたノウハウで、成果につながるコンテンツマーケティングを実現。
記事制作のみならず戦略設計から運用支援まで、ワンストップで対応します。

WordPressのページ内リンク(アンカーリンク)とは?

WordPressのページ内リンク(アンカーリンク)とは?

ページ内リンクとは、クリックすると同じページ内の別の場所へスクロール(またはジャンプ)して移動するリンクのことです。「アンカーリンク」や「ページ内ジャンプ」とも呼ばれます。

ページ内リンクの動作イメージ図

ページ内リンクの主な用途

  • 目次: 記事の冒頭に設置し、各見出しへ移動する。
  • トップへ戻るボタン: ページ下部から最上部へ戻る。
  • CVボタンへの誘導: 「申し込みはこちら」などのボタンから、ページ下部のフォームへ移動させる。
  • Q&A: 質問リストから回答部分へ移動する。

これらを活用することで、読者の「探す手間」を省き、快適な閲覧体験を提供できます。

記事制作数1億本以上、取引社数5,300社超の実績

豊富な制作実績と蓄積されたノウハウで、成果につながるコンテンツマーケティングを実現。
記事制作のみならず戦略設計から運用支援まで、ワンストップで対応します。

【ブロックエディタ版】ページ内リンクの設定手順

【ブロックエディタ版】ページ内リンクの設定手順

現在のWordPressの標準エディタである「ブロックエディタ」を使えば、HTMLコードを直接編集することなく、簡単にページ内リンクを設定できます。手順は大きく分けて2ステップです。

  1. リンク先(飛び先)に目印(ID)をつける
  2. リンク元(クリックする場所)にリンクを設定する

それぞれ詳しく見ていきましょう。

手順1:リンク先(飛び先)にHTMLアンカーを設定する

まず、移動したい場所(見出しやブロック)に「ここが目的地ですよ」という目印をつけます。これをHTMLアンカーと呼びます。

  1. WordPressの投稿編集画面を開き、移動先にしたいブロック(例:見出し)をクリックして選択します。
  2. 画面右側の設定パネルにある「高度な設定」をクリックして展開します。
  3. 「HTMLアンカー」という入力欄に、任意の名前(ID名)を入力します。

ID名のルール

  • 半角英数字とハイフン(-)、アンダースコア(_)が使えます。
  • 日本語や全角文字は避けましょう。
  • ページ内で重複しないユニークな名前にしてください。
  • 例:section-1contact-formtoc など

これで、目的地の設定は完了です。

手順2:リンク元(クリックする場所)にリンクを設定する

次に、クリックするテキストやボタンにリンクを設定します。

  1. リンク元にしたいテキストをドラッグして選択するか、ボタンブロックを選択します。
  2. ツールバーのリンクアイコン(鎖のマーク)をクリックします。
  3. URL入力欄に、「#」+「手順1で設定したID名」を入力します。
    • 例:手順1で section-1 と設定した場合 → #section-1 と入力
  4. Enterキー(または送信アイコン)を押して確定します。

ポイント

  • 必ず先頭に半角のシャープ「#」をつけてください。
  • ID名は手順1で設定したものと完全に一致させてください(大文字・小文字も区別されます)。

これで設定は完了です。プレビュー画面でリンクをクリックし、指定した場所へスムーズに移動するか確認してみましょう。

別ページの特定箇所へリンクを貼る方法

別ページの特定箇所へリンクを貼る方法

「他の記事の、この見出し部分を読んでほしい」という場合も、ページ内リンクの仕組みを応用できます。

手順は以下の通りです。

  1. リンク先(別ページ)の該当箇所に、手順1と同様にHTMLアンカー(ID)を設定し、記事を更新(保存)します。
  2. リンク元の記事でリンクを設定する際、URL入力欄に「そのページのURL」+「#」+「ID名」を入力します。

URLの例

  • ページURL:https://example.com/page-a/
  • 設定したID名:point-1
  • リンク先URLhttps://example.com/page-a/#point-1
別ページへのリンクURL構造図

これにより、リンクをクリックすると「別ページの指定した場所」へ直接アクセスさせることができます。

記事制作数1億本以上、取引社数5,300社超の実績

豊富な制作実績と蓄積されたノウハウで、成果につながるコンテンツマーケティングを実現。
記事制作のみならず戦略設計から運用支援まで、ワンストップで対応します。

ページ内リンクがうまくいかない時のチェックリスト

ページ内リンクがうまくいかない時のチェックリスト

「設定したのに動かない」「反応しない」という場合は、以下のポイントをチェックしてみてください。

「よくある間違い」と「正しい設定」の対比表
チェック項目確認内容
「#」の付け忘れリンク元の設定で、IDの前に「#」がついていますか?(例:section1 ではなく #section1
全角文字の使用「#」やID名が全角になっていませんか?すべて半角英数字で入力してください。
ID名の不一致リンク先(HTMLアンカー)とリンク元のID名は完全に一致していますか?スペルミスを確認しましょう。
ID名の重複同じページ内で、同じID名を複数の場所に設定していませんか?IDはページ内で唯一である必要があります。
数字のみのIDID名の先頭が数字だと動作しないブラウザがあります。先頭はアルファベットにしましょう(例:1-section ではなく section-1)。

ページ内リンクの活用事例とメリット

ページ内リンクの活用事例とメリット

ページ内リンクは単なる移動手段ではなく、サイトの成果を高めるための重要なテクニックです。代表的な活用事例を紹介します。

目次プラグインとの連携

WordPressで人気のプラグイン「Table of Contents Plus」や「Easy Table of Contents」などは、記事内の見出し(H2、H3など)を自動的に検出し、ページ内リンク付きの目次を生成してくれます。

これらを使えば、手動で一つひとつIDを設定する手間が省け、自動的にユーザビリティの高い目次を設置できます。

お問い合わせ・申し込みボタンへの誘導

ランディングページ(LP)やサービス紹介記事などで特に有効なのが、CV(コンバージョン)エリアへの誘導です。

記事の冒頭や、興味が高まりそうな中盤に「今すぐ申し込む」や「お問い合わせはこちら」といったボタンを設置し、ページ最下部にある申し込みフォーム(またはフォーム直前のセクション)へリンクさせます。

読者が「申し込みたい」と思った瞬間にフォームへ移動できるため、スクロールの手間による離脱を防ぎ、CV率の向上が期待できます。

記事制作数1億本以上、取引社数5,300社超の実績

豊富な制作実績と蓄積されたノウハウで、成果につながるコンテンツマーケティングを実現。
記事制作のみならず戦略設計から運用支援まで、ワンストップで対応します。

専門家も活用する記事作成サービス「CROCOの記事作成サービス」とは?

専門家も活用する記事作成サービス「CROCOの記事作成サービス」とは?

ここまでページ内リンクの設定方法を解説してきましたが、Webサイトの成果を最大化するには、ユーザビリティだけでなく「コンテンツの質」そのものが重要です。

「WordPressの操作は覚えたけれど、肝心の記事を書く時間がない」「SEOに強い記事構成が作れない」とお悩みの方におすすめなのが、「CROCOの記事作成サービス」です。

CROCOは、記事制作数1億本以上、取引社数5,300社超という圧倒的な実績を持つコンテンツマーケティングのプロフェッショナルです。

  • SEOのプロが設計: 検索意図を深く分析し、上位表示を狙える構成案を作成します。
  • ユーザビリティへの配慮: ページ内リンクの活用など、読者が読みやすい記事構成を提案します。
  • 豊富なリソース: 専門知識を持つライターが、貴社のターゲットに響く記事を執筆します。

サイトの運用負荷を下げつつ、成果につながる高品質なコンテンツを増やしたい方は、ぜひ一度ご相談ください。

「CROCOの記事作成サービス」の詳細はこちら

まとめ:ページ内リンクでユーザビリティを向上させよう

WordPressのブロックエディタを使えば、HTMLの知識がなくても簡単にページ内リンクを設定できます。

長文記事のナビゲーションや、コンバージョンへの誘導など、ページ内リンクを効果的に活用して、読者にとって快適で成果の出るWebサイトを目指しましょう。

SEO対策やコンテンツ制作に関する無料相談はこちら

目次