楽天GoldでLP（ランディングページ）を作成している際、こんなトラブルに遭遇したことはありませんか？
- 「ページ内リンク（アンカーリンク）をクリックしても反応しない」
- 「ジャンプはするけれど、ブラウザのURL欄に『#〇〇』がつかない」
通常、HTMLのページ内リンクは「相対パス」で記述しますが、楽天の仕様やiframe環境によってはうまく動作しないことがあります。
今回は、そんな時に試してほしい「絶対パス」を使った解決策と、よくある記述ミスについて解説します。
解決策：相対パスではなく「絶対パス」で書く
結論から言うと、リンクの飛び先を「ファイル名」だけで書くのではなく、「httpsから始まるフルパス」で記述してください。
【×】うまくいかない書き方（相対パス）
<a href="#item-detail">商品詳細へ</a>【〇】解決する書き方（絶対パス）
<a href="https://www.rakuten.ne.jp/gold/あなたのショップID/page.html#item-detail">商品詳細へ</a>このように記述することで、ブラウザに「このページの、この場所に飛びなさい」と強制的に指示を出せるため、リンクの挙動が安定します。
注意！「id」の書き方に間違いはありませんか？
絶対パスに直しても動かない場合、飛び先の id の書き方を確認してください。 これはプロでもやりがちなミスです。
【×】間違い（idに#をつけている）
<section id="#item-detail">
ここに商品詳細
</section>【〇】正解（idは名前だけ）
<section id="item-detail">
ここに商品詳細
</section>ルール
リンク元（a href）： # が必要（「～の場所へ」という意味）
リンク先（id）： # は不要（「私は～という名前です」という意味）
実装サンプルコード
以下をコピーして、ショップIDやファイル名を書き換えてご使用ください。
<a href="https://www.rakuten.ne.jp/gold/ショップID/index.html#campaign">
キャンペーン情報を見る
</a>
<section id="campaign">
<h2>今月のキャンペーン</h2>
<p>お得な情報を掲載...</p>
</section>まとめ
楽天Goldでのページ内リンク不具合は、以下の2ステップで解決します。
- リンク先（id）に「#」が入っていないか確認する。
- リンク元（href）を「絶対パス（https://～）」書き換える。
特にスマホ（楽天アプリ）経由や、RMSのヘッダー・フッター内からGoldページへ飛ばす場合は、この「絶対パス記述」が必須となるケースが多いです。 地味な修正ですが、ユーザーの回遊率（迷子防止）に直結しますので、ぜひ見直してみてください。
