aaa
Bloggerでページ内アンカーリンクを設定する方法
8月 13, 2019
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) リンク元の設定
リンク元（ここから飛ぶよ！のところ）で、リンクを設定
ブログ記事内に別の箇所へのリンクを設置する方法についてお伝えします。
- ページ内リンクの作成方法
まず、リンクを作成したい箇所にアンカーリンクを作成します。
例えば、「この記事の後半部分にジャンプするにはこちらをクリックしてください」というリンクを設置したい場合は、ジャンプ先となる箇所に「ジャンプ先」という名前のアンカーリンクを作成します。
アンカーリンクの作成方法は、以下の手順に従います。
- アンカーリンクを作成する場所にカーソルを合わせます。
- 「リンクを挿入」ボタンをクリックします。
- 「アンカーリンク」を選択します。
- アンカーリンクの名前を入力し、「OK」をクリックします。
- ページ内リンクの設置方法
次に、リンクを設置する箇所にリンクを設置します。
例えば、先程作成した「この記事の後半部分にジャンプするにはこちらをクリックしてください」というリンクを設置したい場合は、リンクを設置したい場所に以下のように記述します。
<a href="#ジャンプ先">この記事の後半部分にジャンプするにはこちらをクリックしてください</a>
「#」の後にはアンカーリンクの名前を入力します。
bbb
