Bloggerでページ内アンカーを設定する方法

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

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



ここに飛びました!