Cocoon

【Cocoon】アンカーリンクを使ってページ内の移動をスムーズに!

2022年8月6日

Cocoon アンカーリンク

長ったらしいだけの記事は読まれません!

  • ボリュームのある記事を書くことが多い
  • ページ内リンクを活用してみたい
  • せめて結論だけでも読んでほしい

どれか1つでも当てはまる人はぜひこの記事を読んでアンカーリンクをマスターしましょう!

HTMLの知識が無い私でも簡単にできたので大丈夫です!方法はとっても簡単なのでぜひご覧ください!

アンカーリンクとは?

アンカーリンクは別名「ページ内リンク」とも呼ばれ、同じページの指定の場所にジャンプさせるリンクのことです。

ボリュームのある記事ではスクロールが面倒となり、読者の離脱率が高くなってしまいます。

ですがこのアンカーリンクを使えばすぐに指定の場所へ移動できるので、読みやすさがUPします。

注意点を知りたい人はこちら。(←これがアンカーリンクです)

アンカーリンクを設定してみよう!

設定方法

では実際にどうやってアンカーリンクを使うのかご紹介します。

大きく手順は2つです。

ページ内リンクの設定方法
  • ステップ1
    リンク元の設定

    リンクで「#○○」を入力

  • ステップ2
    移動先の設定

    HTMLアンカーに「○○」を入力

リンク元の設定

まずアンカーリンクを設定したい場所を選択し、リンクを挿入します。

Cocoon アンカーリンク

URLの入力欄に「#○○」と入力します。(※○○は任意の文字でOK)

アンカーリンクで使う文字列のルール
  • 「#」は半角
  • #のあとの最初の文字はアルファベットのみ
  • 大文字と小文字は区別される
  • ほかのアンカーリンクと被らないようにする
  • 「スペース」は使えない

ここでは「注意点」に飛ばしたいリンクなので「#cyuui」と入力しました。

これでリンク元の設定は完了です。

移動先の設定

先ほどのリンクから飛ばしたい場所の設定をします。

リンクの移動先を選択した状態で右上の「設定」を開きます。

その中から「高度な設定」タブを開くと、「HTMLアンカー」という項目があります。

ここにリンクの設定で入力した文字「#○○」を入力します。

ただし、「#」は除いてください。

つまり先ほどの例で言うと、「cyuui」のみ入力します。

アンカーリンクのおさらい
  • リンク元は「#○○」を入力
  • 移動先は「○○」を入力

アンカーリンクを使うメリット

ページ内リンクを使いこなせるようになれば、私たち運営と記事を読んでくれる読者どちらにもメリットがあります。

読者側:必要な情報までジャンプできる

記事を最初から最後まで読んでくれる読者は滅多にいません。

自分の悩みに直結しないところには興味がないからです。

アンカーリンクがあれば必要な情報だけを知れるので時間短縮にもなり、満足度が高くなります。

運営側:記事内で誘導できる

「これだけは知ってほしい!」という情報があればそこにリンクで誘導ができます。

わかりやすい結論やとっておき情報など、読者にとって有益なものであればスクロールの手間も省けます。

こばち
こばち

「この人の記事読みやすい!」って思ってくれたら嬉しいですよね!

アンカーリンクを設定するときの注意点

リンク 注意点
アンカーリンクの注意点
  • 「#」は半角
  • ほかのアンカーリンクと被ってはいけない
  • 最初の文字はアルファベットのみ使える
  • プレビューで動作確認をしておく

記事を公開する前にアンカーリンクが作動するか確認しましょう。

うまくリンクが作動しないときは文字列が間違っているか「#」が全角になっている可能性があります。

まとめ:ボリュームのある記事では積極的に活用しよう!

  • 覚えやすい文字列を使おう
  • 「○○一覧」系の記事では積極的に使おう
  • スマホでも動作確認をしよう

せっかく頑張ってボリュームのある記事を書いても、読者にとってはただただ長いだけの記事になってしまいます。

ページ内リンクを活用すれば読者は必要な情報だけを探せるので記事の満足度が上がります。

あなたが思っているより簡単にできるので、いますぐ活用しましょう!

-Cocoon