この記事ではSWELLで作ったアンカーリンクがずれる原因とその対策をお伝えします。
私自身も、Swellのアンカーリンクで何度か沼にはまりましたが、原因のパターンをつかんでからはトラブルがかなり減りました。あなたも同じところで悩まずに済むように、できるだけ分かりやすく整理していきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Swellのアンカーリンクとは？まずはざっくりイメージをつかむ
最初に、「そもそもアンカーリンクって何？」というところを、Swellの管理画面での操作イメージと合わせて整理しておきます。
アンカーリンクとページ内リンクの基本を整理
言葉の定義があいまいなままだと、設定を見直すときに混乱しがちです。よく出てくる用語を、Swellでの使い方と一緒にまとめておきます。
| 用語 | 意味・イメージ | Swellでの具体例 |
|---|---|---|
| ページ内リンク（アンカーリンク） | 同じページ内の特定の場所にジャンプするリンク | 目次から各見出しへ飛ぶリンクなど |
| アンカー（id） | 「ここで止まってね」と指定する目印 | ブロックの「HTMLアンカー」に設定する文字列 |
| リンク元 | クリックされる側の要素 | 目次の項目・ボタン・テキストリンクなど |
| リンク先 | スクロール後に止まりたい位置 | セクションの先頭ブロックや見出しブロック |
| #（シャープ） | 「このidの場所に飛ぶ」という指定 | #price、#contact など |
ざっくり言うと、Swellではブロックエディターの「HTMLアンカー」に入れた文字列がidになり、そのidに対して「#id名」でリンクを付けるだけでページ内リンクが動きます。HTMLを直接書かなくても、管理画面の操作だけで完結できるのが扱いやすいところです。
Swellでアンカーリンクを使うと何が便利か
Swellのアンカーリンクをきちんと設計しておくと、読者にも自分にもメリットが大きいです。
- 長文の記事でも、読みたい場所に一瞬で飛べるので、読者が迷いにくくなる
- サービスページやサイト型トップページで、メニューから必要な情報へスムーズに誘導できる
- 「料金」「特徴」「お客様の声」「お問い合わせ」など、申し込みまでの導線をわかりやすく作れる
スマホで読む人ほどスクロール量が増えます。Swellのアンカーリンクをきちんと整えておくことは、小さなテクニックに見えて、実はかなり大きなユーザビリティ改善につながります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Swell アンカーリンクの作り方3ステップ
続いて、Swellでページ内のアンカーリンクを作る基本の流れを3ステップで整理します。やり方をおさらいしておくと、あとで「どこを直せばいいか」が分かりやすくなります。
ステップ1｜リンク先にHTMLアンカー(id)をつける
まず、ジャンプ先にしたい場所に目印（アンカー）を付けます。Swellではブロック単位でHTMLアンカーを設定できます。
| 手順 | やること | ポイント |
|---|---|---|
| 1 | スクロール後に止めたいブロックを選択する | 見出しブロックでも、セクション全体のブロックでもOK |
| 2 | 右サイドバーの「高度な設定」を開く | ブロックタブになっているか確認 |
| 3 | 「HTMLアンカー」に半角英数字で短い名前を入力する | 例）price、plan、contact など |
| 4 | 入れたアンカー名をメモする | あとでリンク元に「#price」のように使う |
アンカー名は、後で自分が見て意味が分かる短い英単語にしておくと管理しやすいです。日本語でも動くことはありますが、文字化けやコピペ時のトラブルを避けるためにも、私は英字＋数字に統一するようにしています。
ステップ2｜リンク元テキストやボタンに「#id」を設定
次に、クリックされる側のテキストやボタンにリンクを設定します。やり方は通常の内部リンクとほとんど同じです。
- リンクにしたいテキストやボタンブロックを選ぶ
- 鎖アイコン（リンクボタン）をクリックする
- URL欄に「#アンカー名」を入力する（例：#price）
- Enterキーか適用ボタンで確定する
同じページ内であれば、フルのURLを入れる必要はなく、「#アンカー名」だけでOKです。Swellのアンカーリンクがまったく動かないときは、このアンカー名とHTMLアンカーのつづりが一致しているかを真っ先に疑ってください。
ステップ3｜別ページやグローバルメニューから飛ばす
別ページの特定セクションに飛ばしたい場合も、考え方は同じです。
- リンク先ページの該当ブロックにHTMLアンカーを付けておく
- リンク元では、ページURLの末尾に「#アンカー名」を付ける（例：/service/#plan）
- グローバルメニューやボタンにも同じURLを設定する
Swellのサイト型トップページでは「メニュー → 各セクションへスムーズにスクロール」という動きが基本形になってきます。ここでのアンカーの付け方がきれいだと、全体の印象もぐっと良くなります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
Swell アンカーリンクがずれる主な原因
正しい作り方を押さえたところで、多くの人が悩む「リンク位置がずれる原因」を整理しておきます。Swellの設定というより、サイト全体の構造やCSSとの組み合わせで起きることがほとんどです。
原因1｜固定ヘッダーの高さ分だけ隠れてしまう
一番よくあるのが、固定ヘッダーに見出しの上端が隠れてしまうパターンです。アンカーの場所までスクロールはしているのですが、ヘッダー分だけ上に行き過ぎてしまいます。
| 症状の例 | 実際に起きていること | よくあるケース |
|---|---|---|
| 見出しが画面の一番上に来ず、少し下から始まる | 固定ヘッダーの高さ分だけ上にスクロールし過ぎている | ヘッダーを固定表示にしている |
| セクションの途中で止まってしまう | アンカー位置と視認したい位置にズレがある | 余白が少ないデザインのセクションで起きやすい |
| PCではずれるがスマホではちょうど良い、またはその逆 | デバイス別にヘッダーの高さが違う | PCとスマホで別デザインのヘッダーを使っている |
これはSwellに限らず、「固定ヘッダー＋アンカーリンク」の組み合わせでよく起きる問題です。解決の方向性としては、アンカー位置を少し下げてあげるイメージになります。
原因2｜HTMLアンカーを付けるブロックの位置が良くない
次に多いのが、「アンカーを付ける場所」がずれているケースです。
- 見出しブロックだけにHTMLアンカーを付けている
- その見出しのすぐ上に余白ブロックや装飾ブロックが入っている
- セクション全体を囲っている親ブロックにはアンカーを付けていない
この状態だと、リンク先で止まりたい位置とアンカーの位置が微妙にズレてしまいます。特に、サイト型トップページでフルワイドブロックを重ねてレイアウトしている場合は、「見出し」ではなく「セクションの親ブロック」にアンカーを付けた方が安定することが多いです。
原因3｜目次・LazyLoad・テーマ移行などその他の要因
頻度としては少し下がりますが、次のような要因でSwellのアンカーリンクがずれることもあります。
- Swellの目次が自動生成するid（index_id0 など）に直接リンクしていて、見出し構成を大きく変更した
- 画像の遅延読み込み（LazyLoad）を使っていて、読み込みタイミングで高さが変わる
- フェードインなどのアニメーション付きブロックにアンカーを付けている
- 別テーマからSwellに移行した際に、古いレイアウトの名残が残っている
このあたりは少しマニアックですが、「見た目が変化するもの」や「自動でidが付くもの」がからむとずれやすい、という感覚だけ持っておくと原因の切り分けに役立ちます。
Swell アンカーリンク ずれる時の直し方5つ
ここからは、実際にSwellのページ内リンクがずれたときに試してほしい対処法を5つに分けてお伝えします。上から順番に試していくイメージでチェックしてみてください。
対処法1｜scroll-padding / scroll-marginで位置を補正する
固定ヘッダーがあるサイトでよく使われるのが、CSSのscroll-padding-topやscroll-margin-topを使った方法です。簡単に言うと、「ジャンプ位置にあらかじめ余白を確保する」イメージです。
| 方法 | 難易度 | メリット | デメリット |
|---|---|---|---|
| scroll-padding-top | 中 | サイト全体のアンカー位置を一括で調整できる | テーマエディターなどでCSS編集が必要 |
| scroll-margin-top | 中 | 特定の要素だけ個別に調整できる | 対象要素にクラスを付けるなどの一手間がいる |
| 余白ブロックで調整 | 低 | 管理画面だけで完結する | デザインが崩れやすく、細かい調整が難しい |
実際にどの数値を入れるかはヘッダーの高さによって変わりますが、「ヘッダーの高さ＋少しの余白」を目安に設定すると、見出しがきれいに見える位置で止まりやすくなります。CSSに慣れているなら、まずここから見直すのが効率的です。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。 【稼げるキーワード教えます】
▼ ▼ ▼
対処法2｜フルワイドブロックにアンカーをつけ直す
サイト型トップページやLP風のページでは、セクションごとにフルワイドブロックを使うことが多いと思います。この場合、見出しだけにアンカーを付けるのではなく、「セクション全体の親ブロック」にアンカーを付けた方が安定しやすいです。
流れとしては次のようなイメージです。
- そのセクション全体を囲っているフルワイドブロックを選択する
- サイドバーの「高度な設定 > HTMLアンカー」に新しいアンカー名を入れる
- もともと見出しに付けていたアンカーは削除するか、別の用途に使う
ヘッダーメニューから各セクションへ飛ぶときだけ位置がずれる場合は、この「親ブロックにアンカーを付ける」やり方で解決することがよくあります。
対処法3｜スムーススクロールやLazyLoadの設定を見直す
Swellには、クリックしたときに滑らかにスクロールしてくれるスムーススクロールの機能があります。この機能自体は便利なのですが、環境によっては微妙な位置のずれを生むことがあります。
チェックする順番の一例です。
- 一度スムーススクロール機能をオフにして、位置が変わるか確認する
- 画像の遅延読み込みプラグインを入れている場合は、一時的に停止して挙動を見る
- スクロール時にふわっと出てくるようなアニメーション付きブロックにアンカーを付けていないか確認する
アニメーションで動く要素にアンカーを付けていると、その動きのぶんだけ位置が変わって当然です。その場合は、アニメーションしていない親要素や、もう一つ上のブロックにアンカーを移した方が安定します。
対処法4｜目次の自動id・見出し構成を整理する
Swellの目次機能は、見出しから自動でidを生成してくれる便利な機能です。ただ、「後から見出し構成を大きく変えた場合」に、思わぬずれを生むことがあります。
- 目次から飛んだときだけ見出し位置が変な場所で止まる
- 昔は問題なかったのに、リライトしてからおかしくなった
こういったときは、次のポイントを見直してみてください。
- H2、H3、H4などの階層構造が崩れていないか
- 同じ文言の見出しを何度も使っていないか
- 自動生成されたid（index_id0 など）に外部から直接リンクしていないか
自動生成idに外部から直接リンクしていると、リライトのたびに飛び先が変わるリスクがあります。できるだけ、自分で付けたHTMLアンカーを使ってリンクするようにすると安心です。
対処法5｜どうしても直らない時のチェックリスト
ここまでやってもSwellのアンカーリンクのずれが直らないときは、もう少し広い視点で確認してみましょう。個人的に「最後の総ざらい」で見ているポイントです。
- ブラウザのキャッシュを削除して、シークレットウインドウなどでも確認したか
- 一度すべてのプラグインを無効化し、Swell単体での挙動を確認したか
- 別のブラウザや別の端末でも同じずれが起きるか
- 子テーマのCSSやJavaScriptで、スクロール関連のコードを追加していないか
それでも原因が分からない場合は、Swellの公式フォーラムなどに、次の情報をセットで投稿して相談してみるのがおすすめです。
- 該当ページのURL
- 使用しているブラウザ・端末・OS
- どのリンクを押すと、どこでどうずれるのか（スクリーンショットがあるとなお良い）
自分では見落としていたポイントを、他のユーザーや開発者目線で指摘してもらえることも多いです。
Swell アンカーリンクを活用する設計のコツ
ここからは、単に「ずれを直す」だけでなく、Swellのアンカーリンクをうまく使って読みやすさや成約率を上げるための設計のコツをお話しします。
長文記事でのアンカー設計パターン
長文の記事では、「どこにアンカーリンクを置くか」で読者の体験が変わります。よく使うパターンをまとめておきます。
| ページタイプ | おすすめのアンカー配置 | 目的 |
|---|---|---|
| ノウハウ系の長文記事 | 目次から各H2見出しへアンカーリンク | 読者が気になる部分だけをピンポイントで読めるようにする |
| 比較・ランキング記事 | 比較表から各商品の詳しい解説セクションへリンク | 全体像を先に見せてから、興味のある項目だけ詳しく読んでもらう |
| レビュー記事 | 冒頭の「結論まとめ」から、メリット・デメリット・詳細レビューへリンク | 時間がない人向けに、まず結論へ一気に誘導する |
私がよくやるのは、記事の冒頭に「結論だけ知りたい人向けの要約」を置き、そこに戻るリンクも用意しておくパターンです。Swellのアンカーリンクをうまく使えば、読み飛ばされるのではなく「必要なところだけ効率よく読んでもらえる」形を作れます。
サイト型トップページでのSwell アンカーリンク活用例
Swellはサイト型トップページと相性が良いので、アンカーリンクを取り入れると一気にプロっぽいサイトに見えます。
例えば、こんな構成をイメージしてみてください。
- ファーストビュー：サービス名とキャッチコピー、メインボタン
- メニュー：サービス概要 / 選ばれる理由 / 料金 / 実績 / よくある質問 / お問い合わせ
- 各セクション：フルワイドブロックで構成し、それぞれにHTMLアンカーを設定
グローバルメニューから各セクションへSwellのアンカーリンクでスムーズに飛べるようにしておくと、情報量の多いページでも迷いにくくなります。このときも、「セクションの親ブロックにアンカーを付ける」「固定ヘッダーの高さを意識する」の2点を押さえておくと、ずれのリスクをかなり減らせます。
アンカー名の付け方と運用ルール
最後に、地味ですが大事なのがアンカー名（id）の付け方です。適当に付けていると、記事数が増えたときに自分で分からなくなってきます。
| ルールの例 | 良い例 | あまり良くない例 |
|---|---|---|
| 英小文字＋ハイフンで統一する | service-detail、price-list | あいうえお、料金その1 |
| ページごとに接頭辞を付ける | top-about、lp-price | about、price だけで使い回す |
| 意味がイメージできる単語にする | flow、faq、contact | a1、b2、c3 のような記号的な名前 |
私の場合は、「ページ名の略＋セクションの意味」でアンカー名を付けることが多いです。例えばトップページならtop-about、サービスページならservice-planといった感じですね。
こうしてルールを決めておくと、Swellのアンカーリンクが増えてきても混乱しにくいですし、チームで運用するときにも共有しやすくなります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
Swell アンカーリンクのよくある質問
最後に、Swellのアンカーリンクについて私がよく聞かれる質問を、Q&A形式でまとめておきます。
Q1. Swell アンカーリンクがまったく動かない時はどうすればいいですか？
A. まずは次の3つを順番にチェックしてみてください。
- HTMLアンカーに入れた文字と、リンク元の「#アンカー名」が1文字も違わず一致しているか
- 全角と半角が混ざっていないか（特に#の前後）
- 同じページ内に同じアンカー名が複数ないか
このどれかが原因になっていることがとても多いです。それでも動かない場合は、一度そのアンカーリンクを削除し、別のシンプルな名前（英数字のみ）で作り直してみると、すんなり解決することもあります。
Q2. プラグインを入れた方がSwell アンカーリンクは便利になりますか？
A. ページ内リンクのためだけにプラグインを増やす必要は、基本的にはありません。Swellとブロックエディターの標準機能だけで、アンカーリンクの作成は十分に行えます。
むしろ、スクロール関連のプラグインや目次プラグインを余分に入れることで、Swellのアンカーリンクの動きと競合し、ずれや不具合につながることもあります。まずはテーマ標準の機能で組んでみて、不足を感じたら検討するくらいのスタンスがおすすめです。
Q3. アンカー名に日本語を使っても大丈夫ですか？
A. 技術的には日本語のアンカー名も使えますが、あまりおすすめはしていません。
- コピペしたときに文字化けしやすい
- 外部リンクで使うとURLが極端に長くなりやすい
- 複数人で運用するときに、意味の共有がしづらい
そのため、Swellのアンカーリンクを長く運用していくなら、「短い英数字＋ハイフン」など、自分なりのルールを決めておくのが安全です。
Swell アンカーリンク・ずれる問題のまとめ
この記事の内容をまとめます
- Swellのページ内リンクは、「HTMLアンカー（id）と#付きリンク」のセットで動いている
- アンカー位置がずれる一番多い原因は、固定ヘッダーの高さとアンカーを付ける場所の組み合わせ
- フルワイドブロックなどの親ブロックにアンカーを付ける、scroll系のCSSで位置を補正する、といった方法で対処しやすい
- LazyLoadやアニメーション、自動生成idに直接リンクしていることが原因になることもある
- アンカー名の付け方にルールを持っておくと、長期的な運用で迷わなくなる
今日からできる最初の一歩としては、「よくアクセスされる1ページを決めて、アンカーの付け方とリンク元の設定を整理し直してみること」をおすすめします。
その際に、次の3つだけ意識してみてください。
- 固定ヘッダーの高さを意識して、止まってほしい位置をイメージする
- 見出しではなく、セクション全体の親ブロックにアンカーを移してみる
- アンカー名を英数字に統一し、今後も使い回せるルールを決める
この小さな見直しだけでも、Swellのアンカーリンクまわりのストレスはかなり減ります。この記事を開きながら、実際の画面で一緒に設定を触ってみてください。きっと「なんとなく不安だったページ内リンク」が、自信を持って使える武器に変わるはずです。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
