Cocoonで見出しにジャンプする方法｜記事内・別ページの特定の見出しへリンク
記事を読んでいて、「読みたいところへすぐに飛べたら便利なのに」と思ったことはありませんか？
長い記事の場合、最初から最後までスクロールして探すよりも、読みたいところへサッと移動できるリンクがあると、必要な情報だけを見られて便利ですよね。
WordPress初心者の私は、以前から「どうやって作るんだろう？」と気になっていたものの、なんとなく難しそうで後回しにしていました。
でも今日、ついにやってみることに。
実際に設定してみると、思っていたより簡単！
ただ、最初は「設定したのに、なぜかリンク先にうまく飛ばない……」ということもありました。
そこで今回は、WordPressのCocoonを使って、記事内の特定の見出しへジャンプする方法を、初心者目線でわかりやすくまとめます。
さらに、別のページにある特定の見出しへ直接ジャンプする方法も紹介します。
「記事内リンクを作ってみたい」「特定の見出しへ飛ばしたい」という方は、ぜひ参考にしてみてください。
Cocoonで特定の見出しへジャンプするリンクを作りたい
記事を書いていると、
「詳しい説明は別の見出しで解説しているので、そこへ読者を移動させたい」
「別の記事の中にある特定の見出しへ直接リンクしたい」
という場面があります。
WordPressのCocoonでは、**アンカーリンク（ページ内リンク）**を使うことで、特定の場所へ読者をジャンプさせることができます。
たとえば、
「ブログカードの設定方法についてはこちら」
という文章をクリックすると、同じページの「ブログカードの設定方法」という見出しまで移動する、といった使い方です。
さらに設定すれば、別の記事にある特定の見出しへ直接ジャンプさせることも可能です。
長い記事を書いたときや、読者に特定の情報だけを読んでもらいたいときにも便利な機能です。
そもそも「見出しにジャンプする」とは？
「見出しにジャンプする」とは、リンクをクリックしたときに、ページの一番上ではなく、指定した場所まで自動的に移動する仕組みです。
この仕組みは一般的に、
- アンカーリンク
- ページ内リンク
などと呼ばれます。
長い記事では特に便利です。
読者がスクロールして目的の情報を探す必要がなくなるため、記事の読みやすさを向上させることにもつながります。
たとえば、「詳しい設定方法はこちら」というリンクをクリックすると、その説明が書いてある見出しまで一気に移動できます。
「読みたいところがすぐ見つかる」ので、読者にとっても使いやすい記事になります。
Cocoonで記事内の特定の見出しへジャンプする方法
ここからは、実際にCocoonで設定してみます。
難しそうに見えますが、やることは意外とシンプル。
「ジャンプ先を決める」→「ジャンプ先に名前をつける」→「リンクを設定する」
この3ステップです。
今回は、私が実際に設定した方法を紹介します。
STEP1：ジャンプ先の見出しを決める
まず、クリックしたときに移動したい見出しを決めます。
今回は、
「ムームーサーバー」
という見出しにジャンプできるように設定してみます。
STEP2：見出しに「HTMLアンカー」を設定する
まず、ジャンプ先にしたい見出しのブロックをクリックします。
すると、WordPressの画面右側に設定項目が表示されます。
その中にある**「高度な設定」**を開きます。
「高度な設定」を開くと、**「HTMLアンカー」**という入力欄があります。
ここに、ジャンプ先を識別するための名前を入力します。
今回は、
momo
と入力しました。
ちょうどムームーサーバーについての記事を書いていたので、覚えやすいように「momo」にしてみました。
ここで設定する文字は、自分がわかりやすいものでOKです。
ただし、トラブルを避けるため、半角英数字で設定しておくのがおすすめです。
これで、「ムームーサーバー」という見出しに「momo」という名前をつけることができました。
STEP3：リンク元にアンカーを設定する
次に、「ムームーサーバー」の見出しへジャンプさせたい文章を選択します。
今回は、
「ムームーサーバー」
という文字にリンクを設定してみます。
リンクの設定画面を開き、リンク先に
#momo
と入力します。
ここで大切なのが、先ほど設定したHTMLアンカーの前に「#」をつけることです。
今回はHTMLアンカーを「momo」としたので、リンク先は
#momo
となります。
「momo」だけではなく、「#momo」と入力するのがポイントです。
これで設定は完了です。
実際にリンクをクリックしてみると、「ムームーサーバー」の見出しまでスッと移動します。
最初は少し難しそうに感じましたが、やってみると意外と簡単でした。
別の記事にある特定の見出しへジャンプする方法
ここまでの方法では、同じページ内の特定の見出しへジャンプさせました。
実は、別の記事にある特定の見出しへ移動させることもできます。
これを知っておくと、関連記事からさらに詳しい説明が書かれている場所へ、読者を直接案内できます。
たとえば、
- 記事A → 記事Bの「料金について」という見出し
- トップページ → 記事の「お問い合わせ」という見出し
- 関連記事 → 前の記事の「まとめ」という見出し
といったリンクを作れます。
方法は基本的に同じです。
まず、移動先の記事を開き、ジャンプさせたい見出しにHTMLアンカーを設定します。
今回は例として、
price
と設定したとします。
そして、リンク元には、
記事のURL#price
という形でリンクを設定します。
つまり、
「ページのURL」＋「#」＋「HTMLアンカー」
という形です。
たとえば、移動先の記事のURLが
“https://yume-life.net/”
で、HTMLアンカーを
price
と設定した場合は、
“https://yume-life.net/#price”
となります。
このリンクをクリックすると、別の記事を開いたあと、指定した「price」の場所まで自動的に移動します。
長い記事の中から、必要な情報だけをピンポイントで案内したいときに便利です。
うまくジャンプできないときのチェックポイント
「設定したのに飛ばない」という場合は、次の項目を確認してみましょう。
- HTMLアンカーの入力ミスがないか
- リンク先の「#」を忘れていないか
- アンカー名にスペースが入っていないか
- リンク先のページが正しいか
- ジャンプ先にHTMLアンカーが設定されているか
- HTMLアンカーとリンク先の名前が一致しているか
- ページを公開した状態でもう一度確認したか
特に注意したいのが、HTMLアンカーの名前とリンク先の名前が一致しているかです。
たとえば、
HTMLアンカーを
cocoon-setting
と設定したのに、
リンク先を
#cocoon-settings
としてしまうと、正しくジャンプできません。
最後に「s」があるかないかだけでも、別の名前として扱われます。
また、リンク先の最初に**「#」をつけ忘れる**のも、よくあるポイントです。
「なぜか飛ばない……」と思ったら、まずはこの2つを確認してみてください。
① HTMLアンカーの名前が一致しているか
② リンク先に「#」がついているか
Cocoonで見出しへのジャンプを使うメリット
アンカーリンクを使うと、単に「便利になる」だけではありません。
長い記事を読みやすくできるというメリットがあります。
たとえば、
「詳しい設定方法はこちら」
というリンクを設置しておけば、読者は長い記事を延々とスクロールする必要がありません。
読みたい情報がある場所まで、すぐに移動できます。
また、関連記事から特定の見出しへ誘導することで、読者が必要な情報にすぐたどり着けるサイト構成を作ることもできます。
特に、設定方法や使い方などの情報をたくさん載せている長い記事では、こうしたリンクがあるだけで、かなり読みやすくなります。
まとめ
Cocoonで特定の見出しへジャンプするには、HTMLアンカーを使ったアンカーリンクを設定します。
覚えておきたいのは、この2つです。
① ジャンプ先の見出しにHTMLアンカーを設定する
例：
price
② リンク元から「#アンカー名」を指定する
例：
#price
別ページの場合は、
ページURL#price
とします。
今回、実際に設定してみて思ったのは、最初に感じていたほど難しくなかったということです。
ただ、HTMLアンカーの名前とリンク先が少しでも違っていたり、「#」をつけ忘れたりすると、うまくジャンプできませんでした。
WordPress初心者の私でも設定できたので、「難しそう」と思っている方も、まずは一度試してみてください。
長い記事の中で読者を目的の場所へ案内したい場合や、関連記事から特定の見出しへ誘導したい場合に、アンカーリンクはとても便利です。
まだまだブログ初心者ですが、少しずつ覚えていきます。覚書としてもここに残しておきたいです。
同じようにブログを始めたばかりの人に見ていただいて少しでもお役に立てれば嬉しいです。
コメント