【ブログ編集】Bloggerで簡単にページ内リンク（アンカー）を作る方法

Bloggerで簡単にページ内リンクを作る

Bloggerでブログを書いているとページのリンク付きメニューが作りたいときがあるのですが、Bloggerにはページ内リンクを作る機能が無く、ページ内リンクのやり方がわかりませんでした。

煩雑な方法は嫌なので色々探してみた結果、比較的簡単そうなものが見つかったので紹介します。

紹介するのは、見出しなどへジャンプするものと、文字列へジャンプするものの2種類です。

見出し・小見出し・準見出しなどへのリンクの作成法

１．飛ばし先の文字を見出し（小見出し・準見出し）にします。

テスト１

２．編集画面をHTMLに変更します。

この時、見出しにした部分のHTMLは下の通りです。

<h2>
テスト１</h2>


これに下のように「id="test"」書き加えます。


<h2 id="test">
テスト１</h2>


testは、適当なローマ字でOKです。


３．リンク元になる文字列にリンクをくわえます。

テスト１へ飛ぶ


リンクは、 https://blog.kitaro.click/2019/07/blogger.html#test


編集中のページの画面右のリンクからコピーして、そこに#testを加えるだけです。


今回は見出しでやりましたので、「h2」となっていますが、小見出しなら「h3」、準見出しなら「h4」になります。

文字列へのリンクの作成方法

１．飛ばし先の文字を書きます

ジャンプ先

今回は、「ジャンプ先」と言う文字列にジャンプさせます。

２．編集画面をHTMLに変更します。


HTML編集画面で、飛ばし先の文字列を<div id="test2">ジャンプ先</div>のように、囲みます。


<div id="test2">
ジャンプ先</div>

test2は、適当なローマ字でOKです。


３．リンク元になる文字列にリンクをくわえます。

ジャンプ先へ飛ぶ


リンクは、 https://blog.kitaro.click/2019/07/blogger.html#test2


編集中のページの画面右のリンクからコピーして、そこに#test2を加えるだけです。



以上の様に、リンク先に「id="〇〇"」で名前を付けて、ページのアドレスの後に#〇〇を付けたものをリンク先に指定するだけです。

ページのはじめにリンク付きのメニューを作ったり、TOPへ戻るリンクが簡単に作れそうなので、活用していこうと思います。