投稿小ネタ ページ内リンク

こんにちは


今日は、ページ内リンクについて。
いきなり使ったわけですが
まずはコードから書いて説明に移りましょう。

---

<a href="#a1">こんにちは</a><br />
<br />
<br />
<a name="a1">今日は、ページ内リンクについて。</a> or <div id="a1">今日は、ページ内リンクについて。</a>

---

このようになっています、順番に説明していくと
<a name="a1">今日は、ページ内リンクについて。</a>
この部分については、今日は、ページ内リンクについて。という文章に対してHTML上での名前を付けているところです、このコードでは文章に a1 という名前を付けています。
ページ内リンクの移動先の目印みたいなものですね。リンクの到達点となります。
タブの先頭の a はリンクの機能を与えるもの、リンク先を到達点に限定する場合は、
<div id="a1">今日は、ページ内リンクについて。</a>
としてみましょう。

<a href="#a1">こんにちは</a>
この部分では、こんにちはという文章に対し、 a1 に飛ぶという機能を付けています。
このコードの中で、　a1 の前についている # が重要。これがつくことで、ページ内の　a1 という場所に飛ぶという意味になり、外すとURLと解釈し失敗してしまいますb

Happiness group 画像倉庫 集合SS URL
こちらはページ外リンク

<a href="http://christinehappinesspicture.blogspot.jp/2014/07/ss_27.html#a2">Happiness group 画像倉庫 集合SS URL</a>

こちらのコードでは、最初にURLを指定し、最後の#a2によって。移動したページ内のa2という場所に飛ぶようにしています。a2としている場所は、URL部分。


あと、通常の作成モードとHTMLモードを切り替えするとリンクのタグになぜか編集ページのURLがつくので、一度更新してブログページのURLをタグにつけ足しましょう。

---

<a name="a2" href="http://pso2ship9happinessgroup.blogspot.jp/2014/08/blog-post_5.html#a1">こんにちは</a><br />

<a name="a1" href="http://pso2ship9happinessgroup.blogspot.jp/2014/08/blog-post_5.html#a2">今日は、ページ内リンクについて。</a>

---

この記事のページ内リンクを正確に書くとこんな感じ、『こんにちは⇔今日は、ページ内リンクについて。』を相互に移動できるようにしています。URLを入れているのは編集モードの切り替えで勝手に追加されるのが面倒だからｂ

最初にリンクなしで投稿してURLを確定させてから、名前(到達点)を付けてURL＋名前でリンクタグを作るのが確実だと思いますｂ