Bloggerでのページ内移動の設定方法

Bloggerでページ内リンクを作成する方法

目次
1.ページ内リンクの設定方法
2.ページ内リンクとは
3.Bloggerでページ内リンク作成時の問題
4.解決策

1.ページ内リンクの設定方法

Bloggerでページ内移動する時は以下の様に記述する

Point

リンク元（出発点）
<a href="記事のアドレス#id名">ここから移動</a>

リンク先（到達点）各タグにid属性を付ける
<h3 id="id名">ここへ移動</h3>


例
<a href="記事のアドレス#id名">ここから移動</a>
<h3 id="id名">ここへ移動</h3>


 2.ページ内リンクとは

ページ内の指定した場所へ移動するリンクを貼りたいた時に使います。
また、別のWebページの任意の場所へのリンクも可能です。
この方法を使うと、記事内の見出しにリンクを貼れば、目次を作成する事が出来ます。

3.Bloggerでページ内リンク作成時の問題

リンクはBloggerでは投稿の”HTML”画面で作成します。
通常ページ内リンクは以下の様に記載する事が多いと思います。
リンク元（出発点）
<a href="#id名">　～　</a>
リンク先（到達点）
<a id="id名">　～　</a>
しかし、Bloggerではこのように作成してしまうと”作成”画面へ戻った時に、BloggerのHTML自動修正機能が働き
<a href="https://www.blogger.com/〜" name="”hoge”">ここに飛ぶ</a>
というような無効なリンク先が追加されてしまいます。

4.解決策

このような不要な修正を回避する為には、以下のように設定します。

1. リンク先;リンク先で使用しているタグにid属性を付ける。
2. リンク元;同一ページ内の移動でも記事のアドレスを記載し、リンク先のid名をしてする。

リンク元（出発点）
<a href="記事のアドレス#id名">ここから移動</a>

リンク先（到達点）各タグにid属性を付ける
<h3 id="id名">ここへ移動</h3>

例
<a href="記事のアドレス#id名">ここから移動</a>
<h3 id="id名">ここへ移動</h3>

これで解決します。