【読み手への思いやりを！】Cocoon：アンカーリンクの貼り方を画像付きで解説

どうも、もりひろです。

ブログ初心者の僕が、ブログ運営にあたって調べたことなどを備忘的に残していくシリーズです。

今回は、「アンカーリンクの貼り方」です。

例えば、「まとめだけ知りたい人はこちら」というようなリンクを貼って、記事のまとめを記載している個所にジャンプできるようにすれば、ユーザーにとって読みやすい記事になりますよね。

今回の記事を読めば、次のようなことができるようになります。

デモ ： この記事の末尾へジャンプ！

では、解説していきます。

アンカーリンクの貼り方

アンカーリンクの貼り方はカンタン6STEPです。

STEP1〜STEP2でジャンプ先の設定、STEP3〜STEP4でジャンプ元の設定を行います。

STEP1：ジャンプ先の「ブロック」→ブロック設定画面

ジャンプ先のブロックのブロック設定画面を開きます。

STEP2：「高度な設定」→「HTMLアンカー」

「高度な設定」の「HTMLアンカー」に英数字を入力します。

お好きな英数字で大丈夫です。後から使用するのでメモしておきましょう。

STEP3：ジャンプ元のテキストで「リンク」

ジャンプ元のテキストを選択し、「リンク」ボタンをクリックします。

STEP4：「#（半角シャープ）＋ジャンプ先のHTMLアンカー」

リンクの入力個所に、「#（半角シャープ）＋ジャンプ先のHTMLアンカー」を入力します。

なお、ジャンプ先を新しいタブで開きたい場合は、「新しいタブで開く」にチェックを入れてください。

最後に「Enter」をクリックして終了です。

指定した文字が、青字＆下線に変わります。

さいごに

アンカーリンクの貼り方を解説しました。

最後まで記事をお読みいただきありがとうございました。ではまた。

デモ ： ここにジャンプしたい！
※ 記事の冒頭に戻る