Bloggerでページ内リンクを設定しようとすると、Blogger側で空気を読んで（？）HTMLを自動修正し、無効なリンクを生成してしまいます。
HTMLの編集画面でリンクを設定しても、作成画面に戻ると勝手に修正されてしまうんですよね…
それを回避してページ内リンクを設定する方法を調べたので、備忘録としてまとめました。


実装例

こちらのここから飛ぶよ！のリンクをクリックすると、ページ最下部の、「ここに飛びました！」に飛びます。


手順

1) 記事のURLを取得

画面右の「投稿の設定」> パーマリンクでリンクを取得、自動パーマリンクでも、カスタムパーマリンクでもよいです。
リンクが表示されたら、そのURLをコピーしておきます。
この記事の場合、https://www.kageori.com/2019/08/blogger.htmlとなります。

2) リンク先の設定

リンク先に名前をつけておきます。
HTML編集画面を開き、リンク先の文言（今回の場合、ここに飛びました！のところ）<div id="ここに好きな名前"></div>で囲みます。

今回の場合、jumpと名前をつけようと思ったので、
<div id="jump">ここに飛びました！</div>
みたいな感じになります。

3) リンク元の設定

リンク元（ここから飛ぶよ！のところ）で、リンクを設定します。
作成画面で、普通にリンクを設定します。
この時設定するリンクには、1) でコピーしておいたURLの末尾に、#マークと、2) でつけた名前を追加します。
今回の場合、https://www.kageori.com/2019/08/blogger.html#jump
となります。

これで完成です！


まとめ

Blogger内でのアンカーリンク、簡単にできるのでぜひ設置してみてください。


参考

Blogger:ページ内アンカーへジャンプしたい場合には、HTML編集が必要。リンクだと余計な情報がついてしまう

Blogger:自動修正機能が邪魔をする。リンクのアンカーはname属性ではなく、id属性で埋め込む



ここに飛びました！