2026-10-20Studioの使い方約7分で読めます

Studioでページ内リンク（アンカーリンク）を作る手順——IDの付け方と、ヘッダーに隠れないための設定

縦に長いページでは、「料金へ」「よくある質問へ」のように、ページの中の目的の場所へ一気に移動できるリンクがあると便利です。これを「アンカーリンク（ページ内リンク）」と呼びます。本にたとえると、読みたい場所に付箋を貼っておき、目次からそこへ飛べるようにする仕組みです。

Studioでは、「移動先に目印（ID）を付ける」「リンクの設定で、その目印を選ぶ」の2段階で作れます。この記事では、手順と、つまずきやすい点を順に整理します。

仕組みは「目印を付けて、目印を指す」

アンカーリンクは、移動先のボックスに付けた「ID」という名前を、リンク先として指定することで成り立ちます。Studioの公式ヘルプでは、リンクの書き方が2つ案内されています。

リンクの書き方	移動先	向いている場面
#ID（例：#price）	同じページの中で、そのIDを持つボックス	長いページの目次や、「ページの上へ戻る」ボタン
/ページのパス#ID（例：/2#reasons）	別のページの中の、そのIDを持つボックス	ヘッダーなど、ほかのページにも置くメニュー

注意「#ID」の形は、同じページの中のIDにしか移動できません。ヘッダーのように、複数のページに置くメニューでは、「#ID」だと、別のページから押したときに移動できなくなります。「/ページのパス#ID」の形にしてください（公式ヘルプ）。

手順1：移動先のボックスに、IDを付ける

移動先にしたいボックスを選ぶ（たとえば、料金表を入れたボックス）
右側のパネルの「設定」タブを開く
「タグ・属性」にある「ID」の欄に、目印にする名前を入れる（例：price）

注意IDに使えるのは、英字・数字・ハイフン（-）・アンダースコア（_）で、半角のみです（公式ヘルプ）。日本語などの全角文字を使うことは、案内されていません。「price」「faq」「access」のように、中身が分かる英単語にしておくと、あとでリンクを設定するときに選びやすくなります。

Studioの右側パネルの「設定」タブ。上部の「リンク」の下の「タグ・属性」に、「ID」の入力欄があり、「price」と入力されている — 実際の画面（手順1の3）。「設定」タブの「ID」の欄に、目印の名前を入れる。

手順2：リンク元で、IDを選ぶ

リンクにしたいボタンやテキストのボックスを選ぶ
右側のパネルの「設定」タブを開き、「リンク」の欄をクリックする
候補の一覧から、手順1で付けたID（例：#price）を選ぶ
プレビューで、押したときに目的の場所へ移動することを確かめる
サイトを更新（公開）する

注意リンクの候補には、同じページに付けたIDと、プロジェクトの各ページのパスが出ます。実機では、ほかのページに付けたIDも、「/2#reasons」のように、ページのパスとIDをつなげた形で並んでいました。別ページのIDへ移動したいときは、こちらを選びます。

Studioの「リンク」の欄をクリックして、候補の一覧が開いた画面。いちばん上に「#price」があり、その下に、各ページのパスが並んでいる — 実際の画面（手順2の3）。「リンク」の欄を開くと、付けたID（#price）が候補のいちばん上に出る。その下には、プロジェクトの各ページが並ぶ。

固定ヘッダーがあると、移動先が隠れる

ヘッダーを画面の上に固定している場合、アンカーリンクで移動すると、移動先の上端が画面の最上部に合わさるため、ヘッダーの裏に隠れてしまいます。Studioの公式ヘルプでは、次の2つの対処が案内されています。

移動先のボックスの上のパディングを、ヘッダーの高さ以上にする（ヘッダーが80pxなら、100pxなど）。設定のしかたはStudioでヘッダーを画面に固定する方法にまとめています
固定位置にしたボックスには、IDを付けない。固定位置のボックスにIDを付けると、正しくスクロールしないことがあると案内されています。固定ヘッダーがあるページでは、移動先をBase（ページ全体の土台）などの、固定ではないボックスにします

「ページの上へ戻る」ボタンを作る

アンカーリンクは、ページの最上部へ戻るボタンにも使えます。Studioの公式ヘルプでは、ページの最上部にあるBaseにID（たとえば「top」）を付け、ボタンのリンクで「#top」を選ぶ方法が紹介されています。固定位置のヘッダーなどがあっても、IDはBaseに付けるよう案内されています。

よくある質問

質問	答え
候補の一覧に、付けたIDが出ません。	同じページのボックスにIDを付けたかを確かめる。別のページのIDを探しているなら、そのページのパスとつなげた形（例：/2#reasons）の候補を探す。
ヘッダーのメニューから押すと、別のページから移動できません。	「#ID」の形は、同じページの中にしか移動できない。「/ページのパス#ID」の形にする。
押しても、移動先が少しずれます。	固定ヘッダーの分だけ、移動先の上端が隠れている可能性がある。移動先の上のパディングを、ヘッダーの高さ以上にする。
リンクが動くかを、確かめたいです。	プレビューや、公開したサイトで押して確かめる。変更を公開したサイトに反映するには、サイトを更新する（公式ヘルプ）。
IDに、日本語を使ってよいですか？	Studioの公式ヘルプでは、半角の英字・数字・ハイフン・アンダースコアが案内されている。日本語は使わず、英単語にしておく。

まとめ

アンカーリンクは、「移動先のボックスの『設定』タブでIDを付ける」→「リンク元のボックスの『リンク』で、そのIDを選ぶ」→「プレビューで確かめて更新する」の順で作れます。別のページから移動するメニューには「/ページのパス#ID」、固定ヘッダーがあるページでは、移動先の上のパディングをヘッダーの高さ以上に、と覚えておくと迷いません。

リンクの種類全体はStudioのリンク設定の基本——目的地に応じた開き方の使い分けに、ヘッダー全体の設計はStudioのヘッダーナビを崩れにくくする設計にまとめています。

生成AIで作ったHTML/CSSを、Studioへ。

SHITAJIは、HTML/CSSのサイトをStudioのネイティブ要素として取り込む変換ツールです。フリープランは月3ページまで無料・カード登録不要で試せます。

登録なしで1ページ試してみる →SHITAJIについて詳しく →

次に読む

2026-10-18Studioでヘッダーを画面に固定する方法——「固定」と「追従」の違いと、本文が隠れないための設定 2026-10-02Studioのリダイレクトページで301転送を設定する手順——できること・できないこと・注意点

※ SHITAJIはStudio株式会社とは関係のない独立したサービスです。「Studio」はStudio株式会社の商標です。本記事は公開されている情報と一般的な制作の知見にもとづいて執筆しています。