Googleサイトのアンカーリンク設定術!特定見出しへ飛ばす方法

目次
Googleサイトのアンカーリンク設定術!特定見出しへ飛ばす方法
Googleサイトのアンカーリンク設定術!特定見出しへ飛ばす方法
@ creator • Click to Play Video Inline
🎵 Googleサイトのアンカーリンク設定術!特定見出しへ飛ばす方法

Googleサイトで社内ポータルやマニュアル、ランディングページを作成する際、誰もが直面するのが「同一ページの特定の位置へジャンプさせたい」という導線設計の壁です。情報量が増えるほど、読者を目的の見出しへダイレクトに案内するアンカーリンクの重要性は高まります。

しかし、直感的に操作できるはずのGoogleサイトにおいて「リンク挿入メニューを開いてもページ内の特定見出しを選択できない」「アンカーリンクが設定できない」と頭を抱えるケースが少なくありません。実は、Googleサイトの構造的な特性を理解すれば、テキストリンクはもちろん、ボタンウィジェットからでも簡単に目的の見出しへリンクを飛ばすことが可能です。2026年現在の仕様に基づいた確実な設定手順と実践ノウハウを分かりやすく解説します。

📌 【この記事の重要ポイントまとめ】
  • 要点1:Googleサイトの編集画面にはアンカー選択機能がないが、公開後の見出しリンク(URLパラメータ)を取得して設定できる。
  • 要点2:標準の「目次作成」機能を使えば、手動設定なしで自動的に見出しへの同一ページ遷移リンクが実装される。
  • 要点3:HTML埋め込みタグはiframe制約で親ページのジャンプに失敗しやすいため、公式の見出しスタイルを活用するのが鉄則。

【原因特定】なぜGoogleサイトで「アンカーリンクが設定できない」のか?

Googleサイトを使い始めた多くの人が「ページ内リンクが作れない」と錯覚してしまう最大の原因は、編集画面のリンク挿入ウィンドウの仕様にあります。リンク設定ボタンを押した際に表示される候補一覧には、サイト内に存在する「ページ名」しか表示されず、ページ内の見出しや段落を選択するUIが存在しません。

また、従来のクラシック版から刷新された「新しいGoogleサイト」では、Web制作で一般的なHTMLソースの直接編集が制限されています。そのため、一般的なウェブサイトのようにテキストブロックへ手動でIDを付与する感覚で作業を進めようとすると、設定画面で行き詰まってしまう構造になっています。

しかし、Googleサイトには「見出し」として設定されたテキストブロックに対して、システムが固有のアンカーURLを自動生成する機能が備わっています。この仕組みを正しく活用することこそが、スムーズなページ内ジャンプを実現する鍵となります。

【手軽さNo.1】標準の「目次作成」機能でページ内リンクを自動生成する

ページ上部に目次を設け、そこから各章へ飛ばしたい場合、最もスマートでメンテナンス性に優れているのが標準の「目次」コンポーネントです。手動でリンクを1つずつ設定する必要がなく、わずか数クリックで実装が完了します。

設定手順は極めてシンプルです。右側の挿入パネルから「目次」を選択してページ上に配置するだけです。これだけで、ページ内に存在する「見出し」および「小見出し」のテキストが自動的に抽出され、クリックするとその場所へスクロールするページ内リンクが瞬時に生成されます。

この機能の優れた点は、後から見出しの文言を変更したり、見出しの順番を入れ替えたりしても、目次側の表示とリンク構造が自動で同期される点です。不要な見出しを目次から隠したい場合は、目次ブロック内の各項目にカーソルを合わせた際に表示される「目のアイコン(非表示ボタン)」をクリックするだけで柔軟に制御できます。

【裏技解説】テキストやボタンから特定の見出しへリンクを飛ばす設定手順

「目次ではなく、本文中のテキストや特定のボタンから任意の見出しへジャンプさせたい」という要望に応えるのが、公開ページのアンカーURLを抽出して流用するテクニックです。手順を知っていれば誰でも1分で設定できます。

具体的な作成手順は以下の3ステップです。

ステップ1:一度サイトを公開する
アンカーリンクの起点となるURLパラメータは、サイトがWeb上に公開された状態で生成されます。まずは画面右上の「公開」ボタンを押し、最新の状態を反映させてください。

ステップ2:公開ページで見出しリンクを取得する
公開された実際のページをブラウザで開きます。ジャンプ先として指定したい見出しの上にマウスカーソルを合わせると、見出しの左側に「クリップ(リンク)アイコン」が表示されます。このアイコンをクリックすると、「https://sites.google.com/...#h.xxxxxxxx」という形式の固有URLがクリップボードにコピーされます。

ステップ3:編集画面でテキストやボタンにURLを貼り付ける
編集画面に戻り、リンクの起点にしたい文字列を選択してリンクボタンを押すか、配置した「ボタン」ウィジェットの編集画面を開きます。リンク先URLの入力欄に先ほどコピーしたURLをそのまま貼り付けて「適用」をクリックすれば、同一ページ内でのスムーズなスクロール遷移が完成します。

【HTML埋め込みの罠】なぜ直接コードを書くとジャンプに失敗するのか?

Web制作の知識がある方ほど、右側メニューの「埋め込み」から<a id="point"></a>のようなHTMLコードを挿入してアンカーを作ろうとしがちです。しかし、Googleサイトにおいてはこのアプローチは推奨されません。

Googleサイトの「埋め込み HTML」機能で挿入されたコードは、セキュリティ上の理由から完全に独立したiframe(サンドボックス環境)の内部でレンダリングされます。つまり、埋め込み枠の中に設定したIDは、親ページ全体のスクロール位置を制御する権限を持っていません。

結果として、ボタンを押しても反応しなかったり、小さな埋め込み枠の中だけでスクロールが発生したりする不具合の原因になります。ページ内の特定位置へ正確にスクロールさせたい場合は、埋め込みHTMLに頼るのではなく、Googleサイト標準のテキストスタイルで「見出し」または「小見出し」を配置し、正規のアンカーURLを取得するのが最も安全で確実な方法です。

【応用テクニック】別ページから特定の見出しへ直接ジャンプさせる内部リンクの作り方

取得した見出しリンクのURLパラメータ(末尾の#h.〜)は、同一ページ内だけでなく、別ページや外部サイトからのダイレクト遷移にもそのまま活用できます。

例えば、利用規約ページ全体のトップではなく「第3条の返金ポリシー」の見出しへ直接案内したい場合や、社内マニュアルの「トラブルシューティング手順」へトップページから直接飛ばしたい場合に絶大な威力を発揮します。設定方法は、別ページのテキストやバナー画像に対して、先ほど取得したハッシュタグ付きのフルURLを指定するだけです。

ユーザーは目的の情報が書かれた位置へピンポイントで着地できるため、ページ内を探し回るストレスを大幅に軽減し、サイト全体のユーザビリティと情報到達率を劇的に引き上げることが可能です。

【google サイト アンカー リンク】に関するよくある質問(FAQ)

Q1:公開ページで見出しにカーソルを合わせてもリンクアイコンが表示されません。なぜですか?
A1:対象のテキストが「標準テキスト」のままになっている可能性があります。編集画面でテキストを選択し、スタイルを「見出し」または「小見出し」に変更してから再公開してください。通常の段落テキストにはアンカーアイコンが自動生成されません。

Q2:見出しリンク(#h.〜)を貼ったボタンを押すと、同一ページなのにページ全体が再読み込みされてしまいます。
A2:ブラウザの挙動やサイトの公開設定状況によって、一度全体がリフレッシュされてからジャンプする場合があります。同一ドメイン内での挙動を安定させるには、リンク先URLにドメイン全体を含める正規のコピー手順を守り、最新のChromeやEdgeなど標準的なモダンブラウザでプレビューおよび動作検証を行ってください。

Q3:編集画面のプレビューモードで見出しリンクをクリックしてもジャンプしません。
A3:編集画面上のプレビュー機能では、URLパラメータによるスクロール遷移が正しくシミュレートされないケースがあります。アンカーリンクの正確な挙動確認は、必ずサイトを「公開」した上で、実際の公開URLにアクセスしてテストしてください。

まとめ:見出しリンクを自在に操りユーザー体験を最大化しよう

Googleサイトにおけるアンカーリンク(ページ内リンク)の設定は、編集画面上だけで完結させようとすると見落としがちですが、「公開ページから見出しの固有リンクを取得して紐付ける」というシンプルなフローを把握していれば迷うことはありません。

社内FAQや業務マニュアル、長文の告知ページなど、情報が集約されたページほどアンカーリンクによる導線設計が閲覧者の利便性を大きく左右します。標準の目次機能と個別リンクの使い分けをマスターし、誰にとっても読みやすく目的の情報へ素早く到達できるGoogleサイトを構築してください。 (出典: google サイト アンカー リンク(Yahoo!ニュース))