ページ内アンカーリンクの貼り方
新規追加(標準スコープ補完)
長いページの中で、目次から各セクションへジャンプさせたい時や、CTA ボタンから「お問い合わせフォーム」までスクロールさせたい時に使うのが アンカーリンク です。 実画面例: アンカーリンクは、ページ内の見出しやセクション位置を確認しながら設定します。
1. アンカーリンクとは?
ページ内の 特定の場所(見出しやセクション) にジャンプするリンクです。URL の末尾に #セクションID を付けることで動作します。
例: https://example.com/about/#contact → 「about」ページの「contact」というIDが付いた要素までスクロールします。
2. アンカーリンクを貼る前提条件
ジャンプ先のセクションに 「ID(識別名)」 が設定されている必要があります。これは Designer モードで制作担当者が事前に設定済みのケースがほとんどです。
サイトに既に存在するアンカーIDの例:
#contact→ お問い合わせフォーム#features→ 特徴セクション#faq→ よくある質問
ヒント: ID が分からない場合は IGNITE公式サイトのお問い合わせフォーム から確認してください。
3. エディターでアンカーリンクを設定する
- リンクを貼りたいテキスト(例: 「お問い合わせはこちら」)を選択
- ツールバーの リンク(鎖アイコン) をクリック
- URL 欄に
#contactのように#から始まる ID を入力(同じページ内へのリンクの場合) - 別ページの特定箇所へリンクする場合は
/about/#contactのように完全パスを書く - Save をクリック
4. ボタンからアンカーへリンクする場合
ボタンも同じ要領で設定できます。ボタン要素を選択し、Settings パネルの「Link」欄にアンカーIDを入力してください。
5. よくある質問 (Q&A)
アンカーリンクを設定したのにジャンプしません。
以下のいずれかが原因の可能性があります。
- ID が間違っている(大文字小文字も区別されます)
- ジャンプ先の要素にまだIDが設定されていない
- ヘッダーが固定の場合、ジャンプ先がヘッダーの裏に隠れることがある(Designer 側でスクロールオフセットの調整が必要)
新しくアンカーIDを追加したいです。
ID の追加は Designer モードでの作業が必要です。IGNITE公式サイトのお問い合わせフォーム からご依頼ください。エディターからは新規追加できません。
次のステップ: リンク系の操作はこれで一通り完了です。次は CMS(お知らせ・ブログ)の管理方法を学びましょう → 「お知らせやブログはどこで管理してるの?」