SWELLのページ内リンクの作り方5つの手順とつまずきやすいポイン

WordPressテーマのSWELLを使っているけれど、ページ内リンクの作り方がよく分からない、リンクを貼ったのに目的の場所に飛ばない、そんなモヤっとした経験はありませんか。

この記事では、SWELLでページ内リンクを作る基本の3ステップから、別ページやメニューへの応用、失敗しやすいポイントの直し方まで、順番にお伝えします。

この記事で分かる事

SWELLのページ内リンクの仕組みとメリットがイメージできる
ブロックエディターだけで設定する具体的な流れが分かる
別ページやグローバルメニューからのページ内リンクも使いこなせる
リンクが飛ばない・位置がズレるときの原因を自分でチェックできる
読者が読みやすくなるページ内リンクの配置アイデアがつかめる

先に結論だけ言うと、SWELLでページ内リンクを作るコツは「ジャンプ先にIDを付けて、リンク元で#IDを指定する」この1点さえ押さえればOKです。あとはこの記事の通りに手を動かせば、誰でも再現できます。

SWELLでページ内リンクを使うとどう変わる？
SWELLのページ内リンクの作り方3ステップ
SWELLのページ内リンクを応用して別ページやメニューに飛ばす
SWELLのページ内リンクがうまく動かないときのチェックリスト
SWELLのページ内リンクの活用アイデアと導線設計
よくある質問｜SWELLのページ内リンクQ&A
SWELLのページ内リンクを使いこなすためのまとめ

SWELLでページ内リンクを使うとどう変わる？

ごとう

まずは、そもそもページ内リンクとは何か、そしてSWELLでページ内リンクを使うとブログがどう変わるのかをざっくり整理しておきます。

ページ内リンクの基本イメージとSWELLでの役割

ページ内リンク（アンカーリンクとも呼ばれます）は「同じページの中の指定した場所へ、一気にスクロールして移動させるためのリンク」です。長い記事であればあるほど効果を発揮し、読者が知りたい情報にまっすぐたどり着けるようになります。

イメージしやすいように、ページ内リンクの有無で読者体験がどう変わるかをまとめると、次のような感じです。

状態	読者の体験	ブログ運営者のメリット
ページ内リンクなし	目的の情報を探すために、スクロールをひたすら上下する	途中で読むのをやめられやすく、最後まで読まれにくい
ページ内リンクあり	「この項目へジャンプ」をタップするだけで一瞬で移動できる	読了率や滞在時間、回遊率が上がりやすくなる

ページ内リンクは、読者の「探すストレス」を減らしてあげるための導線だと考えてもらうと分かりやすいです。特にSWELLはブロックエディターとの相性がよく、コードを書かなくてもページ内リンクを設定できるので、デザインを崩さずに導線を足していけます。

SWELLのページ内リンクを使うメリット3つ

SWELLでページ内リンクを仕込むと、具体的には次のようなメリットがあります。

長文記事でも、読者が「必要な場所だけサッと読める」ようになり、離脱を防ぎやすくなる
見出しやボタンから狙った場所へ飛ばせるので、商品紹介やお問い合わせなどの導線を強化できる
目次やサイト型トップページと組み合わせることで、ブログ全体のナビゲーションを整理しやすくなる

私なら、レビュー記事や比較記事など情報量の多いページほど、積極的にSWELLのページ内リンクを入れて、読者が迷子にならないように設計します。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

SWELLのページ内リンクの作り方3ステップ

ごとう

ここからは、SWELLでページ内リンクを作る基本的な手順を3ステップで解説します。特別なプラグインは使わず、WordPressのブロックエディターだけで完結するやり方です。

STEP1：ジャンプ先のブロックにアンカーIDをつける

まずは、ジャンプ先（飛び先）になる場所に「アンカーID」を設定します。SWELLでは、ブロックごとに「HTMLアンカー」という項目が用意されていて、そこにIDを入れるだけでOKです。

大まかな流れは次の通りです。

ジャンプ先にしたい見出しやテキスト、画像などのブロックをクリックして選択する
画面右側のブロック設定パネルの一番下にある「高度な設定」を開く
「HTMLアンカー」という入力欄に、好きなID（半角英数字）を入力する

IDを決めるときのルールと、よく使う例を表にまとめました。

ルール	内容	例
先頭は半角アルファベット	最初の1文字は英字にする	price、plan1、sectionA
スペースは使わない	単語を区切るときはハイフンかアンダースコアを使う	price-table、faq_list
同じページに同じIDは使わない	1ページ内でIDは必ずユニークにする	plan1、plan2、plan3 のように分ける
全角文字は避ける	文字化けや不具合を避けるため、半角英数字に統一する	price、form、cta など

WordPress全般のルールとしても、HTMLアンカー名はこのような形で付けておくとトラブルを減らせます。

STEP2：リンク元のテキストやボタンに「#ID」でリンクする

次に、リンク元になるテキストやボタン、画像などにリンクを設定していきます。

やることはシンプルで、先ほど決めたIDの前に「#」を付けてリンク先として指定するだけです。

リンクを貼りたい文字列やボタンブロックを選択する
ブロック上部のツールバーから「リンク」アイコンをクリックする
「URLを入力」の欄に、先ほどのIDの前に「#」を付けて入力する（例：#price）
Enterキーを押してリンクを確定する

たとえば、料金表の見出しに price というIDを付けたなら、リンク元には「#price」と入力すれば、クリックでその見出しまで一気にジャンプできるようになります。

ここで、特によく間違えやすいポイントが2つあります。

HTMLアンカー側のIDには「#」を付けない（price のようにIDだけを書く）
リンク元のURL入力欄には「#price」のように、#付きで入力する

この2つを逆にしてしまうと、「リンクはあるのに飛ばない」「変な場所に飛ぶ」といったトラブルにつながるので注意してください。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

STEP3：プレビューでSWELLのページ内リンクの動きをチェックする

リンク設定ができたら、最後にプレビューで実際の動きを確認します。ここをサボると本番公開後に不具合に気づくことが多いので、必ずチェックしておきたいところです。

PC表示で、リンクをクリックしたときにちょうどいい位置で止まるか
スマホ表示でも、ヘッダーやメニューに隠れずに見出しがしっかり見えるか
複数のページ内リンクがある場合、それぞれ正しい場所に飛ぶか

一通り問題なさそうであれば、そのまま公開して大丈夫です。もし違和感があれば、このあと紹介するトラブル対処の章も合わせてチェックしてみてください。

SWELLのページ内リンクを応用して別ページやメニューに飛ばす

ごとう

同じページ内だけでなく、「別ページの特定の位置」や「グローバルメニュー」からページ内リンクで飛ばしたい場面も多いと思います。この章では、そうした応用パターンをまとめて紹介します。

別ページの特定の位置に飛ばすURLの作り方

別ページの特定のブロックにジャンプさせたい場合も、基本の考え方は変わりません。やることは「リンク先のページにIDを付けて、URLの末尾に #ID を足す」だけです。

よくあるケースを表に整理すると、次のようになります。

ケース	設定する場所	URLの例
同じページ内の見出しへ飛ばす	同一ページ内のHTMLアンカーのID	#price
別ページの特定セクションへ飛ばす	別ページ側のHTMLアンカーのID	https://example.com/service/#plan
サイト型トップページ内のセクションへ飛ばす	トップページ内の各セクションID	https://example.com/#feature、https://example.com/#contact など

たとえば、サービス紹介ページの中に plan というIDを仕込んでおけば、ブログ記事側から https://example.com/service/#plan にリンクするだけで、「料金プラン」の位置までジャンプさせることができます。

グローバルメニューやボタンにページ内リンクを仕込むコツ

SWELLでは、グローバルメニューやヘッダー内のリンクにもページ内リンクを設定できます。サイト型トップページと組み合わせると、とても使いやすいメニューになります。

外観のメニュー設定（またはカスタマイザー）で、カスタムリンクを追加する
URL欄に、「ページURL＋#ID」を入力する（例：ホームの特徴セクションなら https://example.com/#feature）
メニューラベルに「特徴」「料金」「お問い合わせ」など分かりやすい名前を入れる

サイト型トップページを作っている場合、「特徴」「実績」「料金」「お問い合わせ」など、それぞれのセクションにIDを振り、グローバルメニューから一気に飛ばせるようにすると、とても親切な導線になります。

CTAボタンやバナー画像にも同じように「ページURL＋#ID」でリンクを設定しておくと、読者が迷わず申し込みフォームやお問い合わせフォームまでたどり着けるようになります。

【稼げるキーワード教えます】
▼　　▼　　▼

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

SWELLのページ内リンクがうまく動かないときのチェックリスト

ごとう

ここからは、「リンクを貼ったのに動かない」「位置がおかしい」といった、SWELLのページ内リンクでありがちなトラブルと、その原因の見つけ方をまとめます。

よくある失敗パターンと原因

まずは、よくある失敗例を一覧にしておきます。原因とセットで見ておくと、自分のケースにも当てはめやすいです。

症状	主な原因	対処法
クリックしても全く動かない	IDのスペルミスや、IDとリンク先の名前が一致していない	HTMLアンカーとリンク元の#IDを、1文字ずつ見比べて確認する
飛ぶけれど全然違う場所に着地する	同じIDを別ブロックにも付けてしまっている	ページ内でIDが重複していないか確認し、1つずつ別のIDに変える
飛ぶけれど見出しがヘッダーに隠れてしまう	固定ヘッダーやスクロール位置のズレ	アンカー位置を1ブロック上にずらすなどして着地位置を調整する
たまに動いてたまに動かない	JavaScriptや他プラグインとの干渉	スクロール系プラグインを一時停止し、挙動が変わるかテストする
スマホだけ挙動が不自然	スマホ用メニューや広告が上部にかぶっている	スマホ表示のプレビューで上部余白を確認し、必要ならデザインを調整する

特に多いのが「HTMLアンカーの欄に#付きで書いてしまう」というパターンです。HTMLアンカー欄には price のようにIDだけを入れ、リンク元に #price と入力するのが正解なので、ここだけはしっかり覚えておきましょう。

固定ヘッダーで見出しが隠れるときの対処

SWELLはヘッダーを固定表示にしているサイトも多く、ページ内リンクで飛んだときに「見出しの上がちょうどヘッダーの裏に隠れてしまう」という現象が起こりがちです。これはテーマに限らず、固定ヘッダーを使っているサイト全般でよくある悩みです。

そんなときの対処法としては、次のようなやり方があります。

アンカーを付けるブロックを、見出しの1つ上の段落や余白ブロックに変えてみる
スペーサーブロックなどを見出しの上に少し入れて、スクロールの着地位置を下にずらす
ヘッダーの高さが極端に大きい場合は、デザイン側で少し高さを調整する

何度かテストしながら、自分のサイトにとって一番バランスの良い位置を探してみてください。

プラグインやスクリプトとの干渉も疑う

ページ内スクロールのアニメーションを行うプラグインや、自作のJavaScriptを入れている場合、それがSWELLのページ内リンクの動きとぶつかっている可能性もあります。

スムーズスクロール系のプラグインを一時的に停止して、挙動が変わるか確認する
カスタムスクリプトを入れている場合は、アンカーリンク関連のコードをコメントアウトしてテストする

それでも解決しない場合は、SWELLの公式ドキュメントやフォーラムなども参考にしながら、同じような事例がないか探してみるとヒントが見つかることがあります。

SWELLのページ内リンクの活用アイデアと導線設計

ごとう

ここからは、「とりあえずリンクを作る」段階から一歩進んで、読者の行動を後押しするためにSWELLのページ内リンクをどう使っていくかを考えていきます。

ブログ記事でのページ内リンク活用パターン

通常のブログ記事の中でSWELLのページ内リンクを使うと、次のような場面で力を発揮します。

長文の解説記事で、冒頭に「要約セクション」を作り、各見出しへジャンプさせる
比較記事で、「結論だけ見たい人はこちら」とボタンを置き、最終結論の見出しへ飛ばす
レビュー記事で、スペックや価格など読者が知りたい項目へピンポイントで飛ばす

記事の種類ごとのおすすめページ内リンク例を表にまとめると、こんなイメージになります。

記事タイプ	ページ内リンクの例
比較・まとめ記事	「結論だけ知りたい人はこちら」→ 結論セクションの見出しへリンク
レビュー記事	「スペックを見る」「価格だけチェックする」など各見出しへリンク
解説・ノウハウ記事	「手順だけ見たい人はこちら」→ 手順まとめの見出しへリンク
FAQページ	質問一覧 → 各Q&Aの見出しへリンク

私なら、特に「結論」「料金」「手順」といった、読者が最初に知りたい情報へ飛ばすリンクを優先して作ります。

LP・セールスページでのSWELLページ内リンク活用例

LP（ランディングページ）のような縦長のページでは、ページ内リンクはほぼ必須の機能です。SWELLのボタンブロックと組み合わせると、申し込みまでの導線をすっきり整えられます。

一番上のヒーローセクションのボタンから「申し込みフォーム」へ一気に飛ばす
途中に挟んだ「今すぐ申し込む」ボタンからも同じフォームへ飛ばす
サービスの特徴を紹介した後、「詳しい料金を見る」ボタンから料金表へ飛ばす

たとえば、フォームがあるブロックに form といったIDを付けておき、各ボタンには #form のリンクを設定しておけば、どこからでも迷わずフォームにたどり着けます。

私ならこう使う：読者目線でのリンク配置の考え方

最後に、私がSWELLのページ内リンクを設計するときに意識しているポイントを3つだけ紹介します。

読者が「最初に知りたいこと」にすぐ飛べる導線を1つ以上用意する
ページ内リンクの文言は「ここを押すと何が分かるか」が一目で伝わるように書く
ジャンプ先では、見出しのすぐ下に要点を書く（飛んできた瞬間に答えが見えるようにする）

たとえば、「詳細はこちら」よりも「料金プランを詳しく見る」のほうが、読者にとってはずっと親切です。SWELLのページ内リンクは、ただ技術的に飛べるリンクを作るだけでなく、「どんな行動をしてほしいか」をイメージしながら配置すると、成果につながりやすくなります。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問｜SWELLのページ内リンクQ&A

ごとう

ここでは、SWELLのページ内リンクについてよくある質問に、Q&A形式でサクッと答えていきます。

Q1．SWELLでページ内リンクを作るのにプラグインは必要ですか？

A1．基本的には必要ありません。SWELLとWordPressブロックエディターの標準機能だけで、HTMLアンカーと#IDを使ったページ内リンクを作れます。むしろ、同じ機能のプラグインを増やしすぎると不具合の原因になることもあるので、まずはテーマ標準のやり方から試してみてください。

Q2．SWELLのページ内リンクのIDに日本語を使ってもいいですか？

A2．使えなくはないのですが、トラブルを避けたいなら半角英数字だけにしておくのがおすすめです。全角文字は、環境によっては文字化けや不具合の原因になることがあるため、price、plan1、faq_top のようなIDにしておくと安心です。

Q3．SWELLの目次とページ内リンクは何が違うのですか？

A3．SWELLの目次は、見出しに自動でIDを振ってくれて、そのIDを使ってページ内リンクを一覧表示してくれる機能です。一方で、自分で設定するSWELLのページ内リンクは、目次以外の場所（ボタン、テキスト、グローバルメニューなど）から、好きな見出しやブロックに飛ばしたいときに使うイメージです。目次と自作のページ内リンクを両方使うと、記事全体のナビゲーションがとても分かりやすくなります。