SWELLの記事内リンク完全ガイド｜アンカーリンクの作り方から応用まで徹底解説

SWELLを使ってブログを書いていると、「記事が長くなってきたから、目次以外の場所にもジャンプできるリンクを置きたい」とか、「別の記事の特定の見出しまで直接飛ばしたい」という場面が出てきますよね。
そんなときに役立つのが記事内リンク（アンカーリンク）という仕組みです。
難しそうに聞こえるかもしれませんが、SWELLのブロックエディタを使えば、基本的な操作で設定できるようになっています。
この記事では、基本的な使い方から応用的な活用法まで、順を追って丁寧に説明していきます。

この記事でわかること

• SWELLで記事内リンク（アンカーリンク）を作成する基本的な手順
• 同一ページ内だけでなく別記事の特定箇所へジャンプさせる方法
• SWELLの関連記事ブロックを使って内部・外部リンクをカード表示する方法
• つまずきやすいポイントとよくある失敗の対処法

SWELLの記事内リンクとは？まず仕組みを理解しよう

記事内リンクの設定に入る前に、そもそもどういう仕組みで動いているのかを押さえておくと、後の手順がグッとわかりやすくなります。
言葉の意味から順番に整理していきましょう。

記事内リンク（アンカーリンク）とは何か

記事内リンクとは、ページ内の特定の場所に「目印（アンカー）」をつけておいて、その目印に向けてリンクを張る仕組みのことです。
クリックすると、ページがその場所までスクロールされます。
よく「ページ内リンク」とか「アンカーリンク」とも呼ばれます。

たとえば、長い記事の途中に「この章だけ読みたい」という読者がいたとしましょう。
記事内リンクが設置されていれば、ページの上の方に置いたリンクをクリックするだけで、その章まで一気に飛ぶことができます。
目次に似た働きですが、目次はテーマごとの見出しに飛ぶのに対して、記事内リンクは見出し以外の場所にも設置できるのが大きな違いです。

SWELLの場合、WordPressのブロックエディタ（グーテンベルク）の機能をそのまま活かして、アンカーの設置もリンクの設定もエディタ上で完結します。
HTMLを直接書く必要は基本的にありません。

アンカーリンクが使われる主な場面

実際にどんな場面で使うのか、具体的なイメージを持っておくと設置の判断がしやすくなります。

• 長い解説記事の途中に「この節だけ先に確認したい人はこちら」というショートカットを置く
• 記事の末尾にある「まとめ」セクションへ、本文の途中から直接飛ばす
• FAQ形式の記事で、質問一覧から各回答へジャンプさせる
• 別のページ・別の記事の特定の見出しへ直接飛ばす
• グローバルメニューからトップページの特定のセクションへジャンプさせる

このように、記事内リンクはひとつのページの中だけでなく、別ページの特定箇所へのリンクとしても使えます。
これはSWELLに限らずHTMLの基本的な仕組みですが、SWELLのエディタはこの設定をとても直感的にできるように設計されています。

アンカーリンクの仕組みをURL形式で理解する

アンカーリンクのURLには「#」（シャープ）という記号が使われます。
たとえば、あるページのURLが「https://example.com/article/」だとして、そのページの中に「section1」というIDのアンカーを設置した場合、そのアンカーに飛ぶためのURLは「https://example.com/article/#section1」という形になります。

同じページ内でのリンクなら、URLの部分を省略して「#section1」だけでも動きます。
別ページへ飛ばすときは、ページのURLと#IDをセットで指定する必要があります。
この仕組みさえ理解しておけば、SWELLでの設定作業がスムーズに進みます。

この3つの言葉が記事内リンクを設定するうえでよく出てきます。
それぞれが「飛び先の設定」なのか「飛び元の設定」なのかを意識しておくと、混乱が減りますよ。

SWELLで記事内リンクを作る基本手順｜同一ページ内ジャンプ

仕組みが理解できたところで、いよいよ実際の設定手順に入ります。
まずは最も基本的な「同じ記事の中でジャンプする」パターンから、ステップごとに確認していきましょう。

ステップ1：ジャンプ先のブロックにアンカー（ID）を設定する

最初にやることは、「どこに飛ばすか」を決めて、その場所に目印をつけることです。
SWELLのブロックエディタでは、どのブロックにも「HTMLアンカー」という設定欄が用意されています。

手順は次のとおりです。

• ジャンプ先にしたいブロック（見出しでも段落でも可）をクリックして選択する
• 画面右側のサイドバーにある「ブロック」タブを開く
• 「高度な設定」という項目を展開する
• 「HTMLアンカー」という入力欄に、任意の文字列を入力する（例：「section1」「faq-top」など）

アンカーに使う文字列は、半角英数字とハイフン（-）のみで構成するのが基本です。
日本語や全角文字、スペースを使うと正常に動作しないことがあるので注意してください。
また、同じページ内で同じアンカー名を複数回使うのも避けましょう。
IDは一意（ユニーク）である必要があります。

見出しブロック（h2やh3）に設定すると管理しやすいですが、段落ブロックや画像ブロックなど、任意のブロックに設定することもできます。
「この図の下から読んでほしい」といった場合でも対応できるので、柔軟に使い分けられます。

ステップ2：飛び元のテキストにリンクを設定する

アンカーを設置したら、次は「そこへ飛ぶためのリンク」を作ります。
これは通常のリンク設定とほぼ同じ手順です。

• リンクにしたいテキストを選択する（ドラッグで選択）
• ツールバーに表示される「リンク」アイコン（鎖のマーク）をクリックする
• URL入力欄に「#アンカー名」を入力する（例：「#section1」）
• Enterキーを押してリンクを確定する

この手順で、同一ページ内のアンカーリンク設定が完了します。
プレビューで確認すると、そのテキストをクリックするたびに指定した場所までスクロールされるはずです。

なお、「#」を忘れてアンカー名だけ入力してしまうのが最も多い初歩的なミスです。
「#section1」のように必ず先頭に「#」をつけることを忘れずに。

ステップ3：プレビューで動作を確認する

設定が完了したら、必ずプレビューで動作を確認しましょう。
WordPressの編集画面上では記事内リンクの動作を確認できないことが多いので、「プレビュー」ボタンから実際のページを開いて、リンクをクリックしてみてください。

クリックしてもジャンプしない場合、よくある原因は以下のとおりです。

• アンカー名のスペルが飛び元と飛び先で一致していない
• 飛び元のURL欄に「#」が入っていない
• アンカーに全角文字や日本語が使われている
• 同一ページ内に同じアンカー名が複数存在している

ひとつひとつ確認すれば、たいていのケースは解決できます。
焦らず見直してみてください。

別記事・別ページの特定箇所へジャンプさせる応用テクニック

基本の同一ページ内ジャンプができたら、次は少し応用的な使い方に挑戦してみましょう。
SWELLでは、別の記事の特定の見出しや段落へ直接飛ばすことも可能です。
内部リンクの精度が上がると、読者の回遊率も高まります。

別ページのアンカーへリンクする基本的な考え方

別ページへのアンカーリンクは、ページのURLとアンカーIDを組み合わせて指定します。
たとえば、「https://example.com/beginner-guide/」というページの中に「#step3」というアンカーが設定されている場合、そこへ飛ぶためのリンクURLは「https://example.com/beginner-guide/#step3」となります。

手順としては、まず飛び先のページに同じようにHTMLアンカーを設定しておきます。
次に、飛び元のページでテキストを選択してリンクを設定する際、URL欄に「飛び先ページのURL＋#アンカー名」を入力するだけです。

これを活用すると、たとえば「詳しい手順はこちらの記事の○○ステップを参照してください」という案内を作ったとき、リンクをクリックするとその記事の該当ステップまで一気に飛ぶことができます。
読者にとっては「どこを読めばいいか迷わなくていい」という体験が生まれ、記事全体への信頼感にもつながります。

SWELLで別記事のリンク先にアンカーを設定する手順

実際の手順を整理すると、次のようになります。

• 飛び先にしたい記事を開き、ジャンプ先のブロックを選択する
• 右サイドバー「高度な設定」→「HTMLアンカー」に文字列を入力して保存する（例：「step3」）
• 飛び元の記事を開き、リンクを設定したいテキストを選択する
• リンクのURL欄に「https://（飛び先ページのURL）/#step3」を入力する
• 保存・公開してプレビューで動作を確認する

注意点として、飛び先の記事が下書き状態だと、アンカーリンクが正常に動作しないことがあるので、飛び先のページが公開済みかどうかを事前に確認しておきましょう。

グローバルメニューからページ内のセクションへジャンプさせる方法

少し上級者向けの使い方として、グローバルメニューのリンクをクリックしたときに、トップページ内の特定のセクションへジャンプさせるという設定もあります。
よくあるのが、「サービス紹介」「アクセス」「お問い合わせ」などのセクションをトップページに並べ、グローバルメニューからワンクリックで各セクションへ飛べるようにする構成です。

この場合も仕組みは同じです。
トップページの各セクション（ブロック）にHTMLアンカーを設定して、メニューのリンク先URLに「トップページのURL＋#アンカー名」を指定します。
ただし、WordPressのメニュー設定画面ではカスタムリンクを使ってURLを手入力する必要があります。

うまくいかない場合は、トップページのURLの末尾に「/」がついているかどうかを確認してみてください。
「https://example.com/#access」と「https://example.com#access」では動作が異なる場合があります。
多くのWordPressサイトではURLの末尾にスラッシュがつくように設定されているので、スラッシュを含めた形で指定するほうが安定します。

見出しブロックには自動でIDが付与される場合がある

SWELLを含む多くのWordPressテーマでは、見出しブロック（h2・h3など）に対して自動的にIDが付与される場合があります。
目次プラグインや一部のテーマ機能がこの自動IDを利用して目次を生成しているため、すでにIDが使われている見出しに対してHTMLアンカーを別途設定すると、IDが二重になってしまうことがあります。

SWELLの場合、デフォルトではブロックエディタの「HTMLアンカー」欄に入力した値が優先されます。
自動生成されるIDと競合しないよう、HTMLアンカーを設定する際は独自の文字列を使うのが安心です。
また、目次の動作に影響が出ることもあるので、設定後はプレビューで目次のリンクも確認しておくといいでしょう。

SWELLの関連記事ブロックで内部・外部リンクをカード表示する

アンカーリンクとは少し異なりますが、SWELLには記事内にリンクを美しく表示するための「関連記事ブロック」という専用機能もあります。
内部リンク・外部リンクの両方に対応しており、ブログの見栄えと読者の回遊性を高めるうえで非常に便利な機能です。

関連記事ブロックとは何か

関連記事ブロックは、SWELLが独自に用意しているブロックのひとつで、記事内にリンクを「ブログカード形式」で表示できます。
ブログカードとは、リンク先の記事タイトル・アイキャッチ画像・説明文などをカードのようにまとめて表示するUIのことです。

テキストリンクに比べて視覚的に目立つため、「あわせて読みたい記事」として読者の目に留まりやすくなります。
また、内部リンク（自分のサイト内の記事）だけでなく、外部リンク（他のサイトの記事やページ）もブログカード化できるのが大きな特徴です。

関連記事ブロックの使い方

SWELLの関連記事ブロックは、ブロックエディタの「ブロックを追加」から「SWELL」または「関連記事」というカテゴリを探すと見つかります。
または「/関連記事」と入力してブロックを呼び出すこともできます。

設置したブロックの入力欄にURLを貼り付けると、自動的にリンク先の情報を取得してブログカードが生成されます。
内部リンクの場合は記事タイトルやアイキャッチがきれいに表示され、外部リンクの場合はサイトのOGP情報（Open Graph Protocolで設定された画像・タイトルなど）が取得されて表示されます。

ただし、外部サイトがOGP情報を適切に設定していない場合、カードが正しく表示されないことがあるので注意が必要です。
その場合は通常のテキストリンクで代用するのが無難です。

内部リンクを関連記事ブロックで表示するメリット

内部リンクを通常のテキストリンクではなくブログカードで表示する最大のメリットは、読者がリンク先の内容を一目でイメージできることです。
「どんな記事に飛ぶのか」がわかれば、クリックするかどうかの判断がしやすくなります。

また、サイト内の回遊率が上がると、読者が複数のページを読んでくれる可能性が高まります。
これはサイト全体の評価にも関わる要素です。
SWELLの関連記事ブロックは、記事を書く手間をほとんど増やさずにこの効果を得られるので、積極的に活用したい機能のひとつです。

テキストリンクとブログカードの使い分け

関連記事ブロック（ブログカード）はとても便利ですが、すべてのリンクをカード化すればいいというわけでもありません。
それぞれに向いた場面があります。

記事の内容や読者の動線をイメージしながら、テキストリンク・ブログカード・アンカーリンクを組み合わせて使うと、読者が迷わず必要な情報へたどり着けるページ構成が作れます。

つまずきやすいポイントと対処法｜SWELLの記事内リンクでよくある失敗

記事内リンクの設定は一見シンプルですが、いざやってみると「クリックしても飛ばない」「思った場所に飛ばない」といったトラブルに遭遇することがあります。
ここでは、よくある失敗パターンとその対処法を整理しておきます。

失敗1：アンカー名のスペルや大文字・小文字が一致していない

アンカーリンクが動作しない原因として最も多いのが、飛び先に設定したアンカー名と、飛び元のリンクURLに入力したアンカー名が一致していないケースです。
HTMLのID（アンカー名）は大文字と小文字を区別します。

たとえば、飛び先に「Section1」と設定したのに、飛び元のURLに「#section1」（小文字）と入力した場合、リンクが機能しません。
アンカー名はすべて小文字の英数字で統一する習慣をつけると、こうしたミスを防ぎやすくなります。

失敗2：スペースや全角文字をアンカー名に使っている

「わかりやすさ」を優先してアンカー名に日本語や全角文字を使いたくなる気持ちはよくわかります。
しかし、URLの中に全角文字やスペースが入ると、ブラウザによってはエンコードされて予期しない動作につながることがあります。

アンカー名には必ず半角の英数字とハイフン（-）だけを使うようにしましょう。
「step-3」「faq-01」「summary」のような形式が一般的で、扱いやすいです。
アンダースコア（_）も使えますが、ハイフンで統一するほうがシンプルです。

失敗3：飛び先ブロックが保存・公開されていない

アンカーを設定したブロックを含む記事が「下書き」状態のままだと、外部からそのアンカーを参照するリンクが動作しません。
また、アンカーを設定した後に「更新」ボタンを押し忘れている場合も同様です。

設定が終わったら必ず記事を「更新」または「公開」してから、プレビューでリンクの動作を確認する習慣をつけましょう。

失敗4：ページが長すぎてジャンプ先がずれて見える

アンカーリンクをクリックすると、指定した要素の上端がブラウザの表示領域の上端に合わせてスクロールされます。
しかし、サイトによっては固定ヘッダー（スクロールしても上部に固定されているナビゲーションバー）がある場合、ジャンプ先の内容がヘッダーに隠れてしまうことがあります。

SWELLでは固定ヘッダーの高さを考慮したスクロール調整機能が含まれていますが、テーマのバージョンやカスタマイズの状況によっては微妙なズレが生じることもあります。
ズレが気になる場合はCSSで「scroll-margin-top」プロパティを調整すると改善できる場合があります。
ただし、CSSの編集は慎重に行いましょう。

失敗5：同じページに同じアンカー名を複数設定してしまっている

HTMLのID（アンカー）はページ内で一意でなければなりません。
同じアンカー名を複数のブロックに設定してしまうと、ブラウザはどちらのアンカーへ飛べばいいかわからなくなり、意図した場所へジャンプしないことがあります。

記事内で複数のアンカーを設定する場合は、「step-1」「step-2」「step-3」のように連番にするか、「intro-section」「summary-section」のように内容を表す単語を組み合わせた名前をつけることが推奨されます。
管理しやすいように、記事ごとにどのアンカー名を使ったかをメモしておくと後から見直しやすくなります。

失敗6：別ページへのアンカーリンクでURLの形式が間違っている

別ページの特定箇所へ飛ばすときは、「ページのURL＋#アンカー名」という形式を正確に入力する必要があります。
よくある間違いとして、スラッシュの位置がおかしいケースがあります。

正しい形式は「https://example.com/article/#section1」ですが、「https://example.com/article#section1」のようにスラッシュなしで書いた場合、リダイレクトが発生してアンカーの参照が失われる可能性があります。
WordPressのパーマリンク設定でURLの末尾にスラッシュがつく設定になっている場合は、スラッシュを含めて入力するほうが安全です。

まとめ｜SWELLの記事内リンクを使いこなして読みやすいブログを作ろう

この記事のポイントをまとめます。

• 記事内リンク（アンカーリンク）は、ジャンプ先のブロックに「HTMLアンカー」でIDを設定し、飛び元のリンクに「#ID名」を指定するだけで作れる
• 同一ページ内のジャンプだけでなく、別記事・別ページの特定箇所へのリンクも「ページURL＋#ID名」の形式で対応できる
• グローバルメニューからトップページのセクションへジャンプさせる場合も、同じ仕組みでカスタムリンクとして設定できる
• SWELLの関連記事ブロックを使うと、内部・外部リンクをブログカード形式で見やすく表示できる
• アンカー名は半角英数字とハイフンだけで構成し、ページ内で重複しないユニークな名前にすることが大切
• 設定後は必ずプレビューで動作確認し、ジャンプ先のズレや動作しない原因を一つひとつ確認する習慣をつける

SWELLの記事内リンクは、高度なコード知識がなくてもブロックエディタで設定できるのが特徴です。
最初は複雑に感じるかもしれませんが、基本的な流れを理解すれば、今後の設定がスムーズになる傾向があります。
長い記事を書くときほど、記事内リンクがあると読者の負担が減り、「読みやすい」という印象につながります。
ブログカード形式の関連記事ブロックも合わせて活用することで、記事と記事をつなぐ動線が自然に生まれ、サイト全体の読みやすさも向上するはずです。
ぜひ今書いている記事から、少しずつ取り入れてみてください。