クライアント様からのお悩み
スポーツジムの公式サイトTOPページに
「今月のおすすめプラン」というボタンがあります。
それを押すと、「キャンペーン一覧」ページ内の
“期間限定ダイエットプログラム”セクションに飛ばしたい。
しかし遷移すると、なぜか一つ上の
“パーソナルトレーニング体験”が画面中央に表示されてしまいます。
固定ヘッダー分を考慮してマージンやパディングを調整しても
位置は変わらず…。
対象項目は手動リストで作っており、
このまま個別リンクは可能でしょうか？
回答（結論）
現在のStudioの仕様では、
リスト形式の個別項目に直接id（アンカー名）を付けることはできません。
そのため、リストのままで正確なアンカーリンクは難しいです。
解決方法は、ターゲットを独立ブロック化し、
必要に応じて“見えない余白”で位置を補正することです。
解決手順（Studio上だけで完結）
1. ターゲットを独立ブロックにする
“期間限定ダイエットプログラム”をリストから外し、
Section / Box / Frame などidを付与できるブロックに置き換えます。
このブロックにID名（例：`diet-program`）を設定します。
2. リンク先を設定する
TOPページの「今月のおすすめプラン」ボタンのリンク先を
`キャンペーン一覧`ページURL + `#diet-program`
に変更します。
3. 固定ヘッダー分のズレを解消する
アンカーの直上に空のスペーサーブロックを配置します。
高さは固定ヘッダーと同じ（例：60〜100px）
背景や枠は非表示にして、見た目を変えずに位置を補正
これで、クリックした際に正確な位置で止まるようになります。
リスト形式を維持したい場合の代替策
どうしてもリスト構造を変えたくない場合は、
“期間限定ダイエットプログラム”の直前に
小さな見出しブロックを配置し、その見出しにアンカーを設定します。
リンクはその見出しへ設定することで、
すぐ下に該当リスト項目が表示されます。
まとめ
Studioの仕様上、リスト項目に直接アンカーは不可
独立ブロック化 + アンカー設定 + スペーサーで正確なリンクが可能
固定ヘッダーがあるサイトでも、狙った位置にきちんと着地できる
この方法は、スポーツジムのキャンペーンページだけでなく、
複数の項目が並ぶあらゆるページで役立ちます。
