Cocoonでページ内リンクを作るには？目次に戻るリンクの作り方も詳しく解説

この記事では、Cocoonでページ内リンクを作る基本手順から、目次に戻るリンクの作り方、うまく動かないときの見直し方まで、できるだけやさしく整理してお伝えします。

読み終わるころには、読者が迷わず読み進められる、やさしい記事導線を自分で作れるようになります。

Cocoonのページ内リンクは何に役立つ？ 読みやすさが変わる基本の考え方

ページ内リンクとは、同じページの中にある特定の場所へ移動できるリンクのことです。たとえば、目次から本文の各見出しへ飛ばしたり、記事の下にある案内から上の説明へ戻ったりするときに使います。Cocoonで記事を書いていると、内容が充実するほどページは長くなりやすいです。そのときに大切になるのが、読者が読みたい場所へすぐ移動できることです。

ページ内リンクでできることを先に整理

まずは、ページ内リンクで何ができるのかをざっくりつかんでおくと、あとで設定手順が理解しやすくなります。

できること	具体例	読者にとってのメリット
目次から見出しへ移動	目次の「設定方法」を押す	読みたい箇所をすぐ読める
ページ上部へ戻る	「ページ上部へ戻る」を置く	長文でも戻りやすい
目次へ戻る	各章の終わりに「目次へ戻る」を置く	次に読みたい項目へ移動しやすい
特定ブロックへ飛ばす	比較表やボタンへ移動する	必要な情報にすばやく届く
別ページの特定位置へ飛ばす	別記事のFAQ部分へ直接案内する	関連情報を見つけやすい

このように、ページ内リンクは見た目のための機能ではありません。

読者の移動を助ける案内板のような役割があります。

Cocoonでも使うのはWordPressの基本機能

Cocoonを使っていても、ページ内リンクの考え方自体はとてもシンプルです。

やることは大きく分けて二つだけです。

• 飛びたい先に目印を付ける
• リンク元からその目印を指定する

この「飛びたい先に目印を付ける」作業が、HTMLアンカーの設定です。

最初は少しだけむずかしそうに見えますが、実際はブロックに名前を付けるような感覚で大丈夫です。

つまり、ページ内リンクは「飛び先の目印」と「そこへ向かうリンク」の組み合わせで成り立っています。

ここを一度理解しておくと、応用にもつなげやすくなります。

どんな記事で使うと効果を感じやすいのか

ページ内リンクは便利ですが、すべての記事にたくさん入れればよいわけではありません。

とくに相性がいいのは、次のような記事です。

• 見出しが多い解説記事
• 比較項目が多いレビュー記事
• 操作手順を順番に説明する記事
• 質問が並ぶFAQ記事
• 申し込みや問い合わせ導線を置く記事

反対に、短い日記のような記事では無理に使わなくても問題ありません。

読者が「途中で移動したくなりそうかどうか」を基準に考えると、設置の判断がしやすくなります。

まずはここだけ押さえればOK｜Cocoonでページ内リンクを作る基本手順

ここからは、Cocoonでページ内リンクを作る流れを順番に見ていきます。先に結論をお伝えすると、基本はとても簡単です。

• リンク先にHTMLアンカーを付ける
• リンク元に「#アンカー名」を入れてリンクを貼る

この二つができれば、基本のページ内リンクは作れます。

手順1｜飛び先のブロックにHTMLアンカーを付ける

まずは、リンクで飛ばしたい場所を決めます。

たとえば「料金」「使い方」「まとめ」など、読者が見たい可能性の高い場所が候補になります。

流れとしては次のようなイメージです。

1. 飛ばしたい見出しやブロックを選ぶ
2. ブロック設定の「高度な設定」を開く
3. HTMLアンカーに任意の名前を入力する

ここで付ける名前は、あとでリンク元から呼び出すための目印です。

たとえば、料金表へ飛ばしたいなら「price」、使い方へ飛ばしたいなら「howto」のように付けます。

初心者の方は、日本語よりも短い英数字で付けるほうが失敗しにくいです。

私も最初は日本語で試したことがありますが、あとから見返したときの分かりやすさや管理のしやすさを考えると、英数字のほうが扱いやすいと感じました。

アンカー名を考えるときは、次のポイントを意識すると安心です。

• 短くする
• 意味が分かる名前にする
• 同じページ内で重複させない
• スペースを入れない

手順2｜リンク元にページ内リンクを設定する

次に、読者がクリックする側のリンクを作ります。

たとえば、本文の冒頭や目次の近くに「料金を見る」「使い方へ移動」などのリンクを置くイメージです。

リンク先には、先ほど付けたアンカー名の前に「#」を付けて入力します。

たとえば「price」というアンカー名を付けたなら、リンク先は「#price」です。

文章リンクにする場合は、次のような考え方になります。

• 料金を見る → #price
• 使い方へ移動 → #howto
• まとめへ進む → #summary

文字リンクでもボタンでも、考え方は同じです。

大事なのは、アンカー名をぴったり一致させることです。

一文字でも違うと、正しく飛ばない原因になります。

手順3｜公開画面で実際に動くか確認する

設定が終わったら、必ず実際の表示画面でクリックして確認します。

編集画面だけでは判断しづらいことがあるため、公開後の見え方で確認するのが安心です。

確認するときは、次の点を見てください。

• クリックしたら目的の場所へ移動するか
• 少しずれた場所に飛んでいないか
• スマホ表示でも押しやすいか
• リンク文が分かりやすいか

ページ内リンクは設定そのものが難しくないぶん、確認を省いてしまいやすいです。

ですが、公開前に一度押してみるだけで、かなりのミスを防げます。

迷わないための基本ルール｜HTMLアンカー名の付け方

失敗しにくいアンカー名のルール

アンカー名は自由に決められますが、実際にはある程度ルールを決めておくほうが使いやすいです。

項目	おすすめ	避けたい例
文字種	英数字を中心にする	長い日本語
文字数	短めにする	長すぎる名前
区切り方	必要ならハイフンを使う	スペースを入れる
重複	ページ内で重複させない	同じ名前を複数使う
意味	内容が分かる言葉にする	適当な文字列にする

たとえば、次のような付け方なら管理しやすいです。

• about
• merit
• demerit
• faq
• contact
• price-table
• step-1

反対に、次のような名前は避けたほうが安心です。

• aaa
• test
• ここ
• 見出しをそのまま長く入れる
• 途中に空白を入れる

アンカー名は読者の目に直接触れないことも多いですが、記事を書く自分にとっては大切な設計図です。

後から見返しても意味が分かる名前にしておくと、修正や追加がぐっと楽になります。

記事が長いほど命名ルールをそろえる価値がある

短い記事なら多少あいまいでも大きく困らないことがありますが、記事が長くなるほど命名ルールの差が効いてきます。

複数の記事でページ内リンクを使い始めると、なおさらです。

私が意識しているのは、役割ごとに名前の付け方をそろえることです。

• 説明パートは about
• メリットは merit
• デメリットは demerit
• 手順は step-1、step-2
• よくある質問は faq

このようにパターンを決めておくと、毎回悩まずに済みます。

結果として、ページ内リンクを使うことそのものが面倒になりにくいです。

日本語より英数字をすすめる理由

アンカー名は日本語で動く場合もありますが、初心者の方には英数字をおすすめします。

理由は、入力ミスや見分けにくさを減らしやすいからです。

日本語だと名前が長くなったり、似た言葉が並んだりして、あとで見返したときに少し分かりづらくなることがあります。

その点、英数字なら短くまとめやすく、リンク元との対応も見やすいです。

難しく考えなくて大丈夫です。

中学英語に出てくるような単語で十分ですし、むしろ短くて意味が分かることのほうが大切です。

あると親切さが増す｜目次に戻るリンクの作り方

目次に戻るリンクの基本的な考え方

考え方はとてもシンプルです。まず、目次の近くにアンカー名を付けます。たとえば、目次部分に「toc」というアンカー名を設定します。そのうえで、各章の終わりに「目次へ戻る」というリンクを置き、リンク先を「#toc」にします。これで、どの章からでも目次へ戻れるようになります。

おすすめの設置場所は次の通りです。

• 各H2の終わり
• 長いH3群の最後
• 比較表の下
• FAQの回答後

このリンクがあるだけで、読者は毎回大きくスクロールしなくても済みます。

とくにスマホでは親切さを感じてもらいやすいです。

目次に戻るリンクが向いている記事

すべての記事に必要というわけではありませんが、次のような記事にはよく合います。

記事タイプ	相性	理由
手順解説記事	とても良い	途中から別の手順に移動しやすい
比較記事	とても良い	気になる項目を行き来しやすい
FAQ記事	良い	質問一覧へ戻りやすい
短い日記記事	低い	移動距離が短い
お知らせ記事	低い	上から下まで読む形が多い

便利そうだから全部に付ける、ではなく、読者が何度も行き来しそうかどうかで判断すると失敗しにくいです。

目次に戻るリンクを置きすぎないコツ

便利だからといって、戻るリンクを増やしすぎると逆に読みづらくなることがあります。とくに、段落ごとに「戻る」を置いてしまうと、文章の流れが細かく切れてしまいやすいです。

おすすめは、ひとかたまりの内容が終わった場所だけに置くことです。たとえば、一つのH2が終わる位置にだけ入れるなら十分です。

ページ内リンクは、多ければ多いほどよいわけではありません。

読者が「ここで戻れたら助かる」と感じる場所に絞ると、自然で使いやすい記事になります。

別ページの特定位置にも飛ばせる｜内部リンクをもっと使いやすくする方法

別ページの特定位置へ飛ばす書き方

やり方はシンプルです。

リンク先を「記事URL＋#アンカー名」にします。

たとえば、別の記事の中に「faq」というアンカーがあるなら、その記事のURLの末尾に「#faq」を付ければ、そのFAQ部分へ直接案内できます。

この方法が役立つのは、次のような場面です。

• 関連記事の特定パートだけを案内したいとき
• 長い解説記事の必要部分へ直接飛ばしたいとき
• 比較記事から詳細記事の該当箇所へ案内したいとき

ただ関連記事へのリンクを貼るだけよりも、読者が目的地にすぐ着けるぶん親切です。

内部リンクを読者目線で設計するコツ

内部リンクはSEOのためだけに機械的に増やすと、かえって読者にとって分かりにくくなります。

ページ内リンクや別ページへのアンカーリンクを使うときも、まずは「どんな人が、何を知りたくて押すのか」を考えることが大切です。

たとえば、次のようなリンク文だと内容が伝わりやすいです。

• 比較結果だけ先に見たい方はこちら
• 設定手順だけ読みたい方はこちら
• よくある質問を先に確認したい方はこちら

このように、リンク先に何があるのかが想像できる書き方にすると、読者は安心してクリックできます。

「こちら」だけで終わらせず、何が読める場所なのかを添えるのがコツです。

CTAや申し込み導線にもページ内リンクは使いやすい

記事の最後に問い合わせや申し込みボタンを置くこともあります。

そのようなとき、冒頭や途中に「申し込み方法を見る」「料金表を見る」といったリンクを置くと、必要な人をスムーズに案内できます。

これは押し売りではなく、読者の手間を減らすための工夫です。

私自身も長い記事を読むとき、必要な場所へ一気に進めるだけでかなり楽に感じます。

だからこそ、ページ内リンクは単なる装飾ではなく、記事の案内設計そのものだと考えると使いやすくなります。

飛ばないときはここを確認｜ページ内リンクのよくある原因と対処法

まずはよくあるミスを一覧で確認

最初に、代表的な原因を表で整理します。

症状	よくある原因	対処法
まったく飛ばない	#の付け忘れ	リンク先を見直す
別の場所へ飛ぶ	アンカー名の重複	同じ名前をなくす
反応が不安定	名前の入力ミス	文字列を一致させる
うまく確認できない	編集画面だけで見ている	実際の表示画面で確認する
思った位置とずれる	余白や固定ヘッダーの影響	設置位置を見直す

「飛ばない」と感じたときは、いきなり難しい原因を考えなくて大丈夫です。

多くの場合は、基本ルールのどこかに小さなズレがあります。

#の付け忘れと入力ミスは最優先で確認

一番多いのは、リンク元の設定ミスです。

アンカー名が「faq」なのに、リンク先が「faq」だけになっていて「#faq」になっていないケースはとてもよくあります。

また、次のようなミスも起こりやすいです。

• 大文字と小文字が違う
• ハイフンの位置が違う
• 最後に余分な文字が入っている
• 似たアンカー名を作って混同している

私も最初は「同じ名前を入れたはず」と思い込んで、なかなか気づけなかったことが何度もありました。

実際には、一文字だけ違っていたということもよくあります。

困ったときは、リンク先とアンカー名を一文字ずつ見比べるのがいちばん確実です。

同じアンカー名の重複にも注意

同じページ内に同じアンカー名が複数あると、思っていない場所へ飛ぶことがあります。

とくに、以前の記事を複製して使っている場合や、見出しブロックをコピーしている場合は要注意です。

前の記事のアンカー名がそのまま残っていて、気づかないまま重複していることがあるからです。

ページ内リンクが増えてきたら、一度アンカー名を見直して、同じ名前が重なっていないか確認しておくと安心です。

動いていても読者には使いにくい場合がある

技術的には飛んでいても、読者目線では使いにくいケースもあります。

たとえば、見出しのかなり下へ飛んでしまって内容の始まりが見えにくかったり、リンク文だけでは何がある場所なのか分からなかったりする場合です。

そのため、動作確認では次の点も見ておくと安心です。

• 読者が期待する場所に着いているか
• 押した先ですぐ内容が始まっているか
• リンク文が分かりやすいか
• スマホで押しやすいか

ページ内リンクは、技術的に動けば終わりではありません。

読者にとって使いやすいかまで見て、はじめて完成です。

置き方ひとつで読みやすさが変わる｜読者が迷わないページ内リンクのコツ

先回りしすぎず、必要な場所だけに置く

ページ内リンクを置く場所は、読者が迷いやすい場面に絞るのがコツです。

たとえば、次のような場所には置きやすいです。

• 記事冒頭の案内リンク
• 各H2の終わり
• 比較表の直前
• FAQ一覧の近く
• CTAの手前

一方で、本文のあちこちに細かく置きすぎると、どれを押せばよいのか分かりにくくなります。

読者にやさしい記事は、リンクが多い記事ではなく、必要なリンクが分かりやすく置かれている記事です。

リンク文は短くても意味が伝わるようにする

ページ内リンクで意外と大事なのが、リンク文の書き方です。

読者はリンク先そのものより先にリンク文を見ます。

だからこそ、押した先の内容が伝わる言葉にしておく必要があります。

おすすめの書き方は次の通りです。

• 設定手順を見る
• 料金表へ移動する
• 目次へ戻る
• よくある質問を見る
• 申し込み方法を確認する

反対に、「こちら」「詳しくはこちら」だけでは何があるのか少し分かりにくいです。

短くても意味が伝わる言葉にすると、読者は迷わず押しやすくなります。

スマホでの見やすさまで意識すると満足度が上がる

Cocoonはスマホで読まれることも多いテーマです。

そのため、ページ内リンクもスマホで押しやすいかどうかを意識すると、使いやすさがかなり変わります。

観点	おすすめの考え方	理由
文字数	短めにする	画面幅に収まりやすい
配置	かたまりごとに置く	誤タップを減らしやすい
リンク文	意味がすぐ分かる言葉にする	迷わず押せる
個数	増やしすぎない	画面がごちゃつきにくい
余白	適度に空ける	指で押しやすい

私もスマホ表示で記事を見返して、「このリンクは押したくなるか」「押した先がすぐ分かるか」を確認するようにしています。

パソコンでは問題なく見えても、スマホでは窮屈に感じることは意外と多いです。

すぐ真似できる実践例｜ページ内リンクの活かし方

比較記事では項目別リンクがとても使いやすい

比較記事では、読者が見たい項目が人によって違います。

ある人は料金だけ見たいですし、別の人はデメリットだけ見たいかもしれません。

そのため、冒頭に次のような案内を置くと親切です。

• 料金比較を見る
• メリットを先に見る
• デメリットを確認する
• 結論だけ読む

この形にすると、記事の満足度が上がりやすくなります。

読者は「長いけれど読みやすい」と感じやすくなるからです。

手順記事では途中離脱を防ぎやすい

手順記事では、必要な作業だけ確認したい読者が少なくありません。

すでに基本設定は終わっていて、応用部分だけ知りたいということもあります。

そんなとき、手順ごとにページ内リンクを置いておくと便利です。

• 手順1へ進む
• 手順2へ進む
• 飛ばないときの対処を見る
• まとめへ進む

読者が自分の状況に合わせて移動できるので、途中で離れにくくなります。

その結果、記事全体の印象もよくなりやすいです。

CTA導線は押したい人だけをやさしく案内する

商品の紹介やサービス案内を含む記事では、CTAへの導線にもページ内リンクが使えます。

ただし、あくまで読者のための案内として自然に置くことが大切です。

たとえば、次のような形なら違和感が出にくいです。

• 料金だけ先に確認したい方はこちら
• 申し込みの流れを見る
• お問い合わせ方法を見る

押したい人が迷わず移動できるだけで、記事の親切さは大きく変わります。

無理に押してもらうのではなく、必要な人に道を作る感覚で置くのがおすすめです。

よくある質問

Cocoonのページ内リンクは、見出し以外にも設定できますか？

はい、Cocoonのページ内リンクは見出しだけでなく、段落やボタンの近くなど、目印を付けたいブロックにも設定できます。

ただし、読者が移動した先で内容をすぐ理解しやすいように、できるだけ見出しや分かりやすいブロック周辺に置くのがおすすめです。

Cocoonのページ内リンクが飛ばないときは、何から確認すればいいですか？

Cocoonのページ内リンクが飛ばないときは、まず「#」の付け忘れとアンカー名の入力ミスを確認してください。

その次に、同じアンカー名を複数使っていないか、実際の表示画面で確認しているかを見直すと、原因を見つけやすくなります。

Cocoonのページ内リンクはSEOに直接影響しますか？

Cocoonのページ内リンクそのものが、それだけで順位を大きく動かすわけではありません。

ただ、ページ内リンクによって記事が読みやすくなり、必要な情報へ移動しやすくなると、読者満足につながりやすいです。

その意味では、読みやすさを支える工夫として十分に価値があります。

まとめ｜最初の1本を作れば、ページ内リンクはもう怖くない

今日やる最初の一歩は、まず自分の記事の中で「いちばん見てほしい見出し」を一つ決めることです。その見出しに短い英数字のアンカー名を付けて、記事冒頭に「ここへ移動する」というリンクを一つだけ作ってみてください。

実際に押して動くのを確認できれば、ページ内リンクの感覚はすぐにつかめます。最初の1本ができれば、次からはぐっと気楽に使えるようになります。