アンカーポイントとは、移動先の印のことです。
<a>というタグはリンクに移動させるためのタグだと思っていませんか?
Aタグというのは、リンクタグと呼ばれるものでクリックした時に、リンク先に移動させるために書くことが多くA=アンカー(anchor)の略です。
アンカーとはイカリのことで船が勝手に移動しないよう固定する時に使います。
つなぎ留めるという意味から、移動先と、リンク元を結びつけるタグとしてアンカーという名前がついたのです。 知らんけど。 たぶんそうです(笑)
アンカーを使って同じページ内に移動先を指定することが出来ます。
ホームページって、だいたい下のような形をしていますよね?
ここでは、Aについてをクリックすると「タイトルA」に、Bについてをクリックすると「タイトルB」という同じページ内の指定箇所に移動するように、作る方法を説明しています。
アンカーポイントの作り方
■ABCDについての解説
|Aについて |Bについて |Cについて |Dについて |
タイトルA
Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文
戻る
タイトルB
Bについての説明文Bについての説明文Bについての説明文Bについての説明文Bについての説明文Bについての説明文Bについての説明文Bについての説明
戻る
タイトルC
Cについての説明文Cについての説明文Cについての説明文Cについての説明文Cについての説明文Cについての説明文Cについて
戻る
タイトルD
Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文Dについての説明文
戻る
まずは移動元(リンクを書きます)
Aについて|Bについて|Cについて|Dについて
まず、リンクする文章を用意します。
1)上記を入力したあと、HTMLの編集を開きます。
<p>Aについて|Bについて|Cについて|Dについて</p>
2)この場所を以下のように書き換えます。
3)<p><a
href="#A">Aについて</a>|<a href="#B">Bについて</a>|<a href="#C">Cについて</a>|<a
href="#D">Dについて</a></p>
4)書き換えたら保存ボタンを押します。
hrefに書かれている『#』の意味
『#』は、現在居るページの事です。
つまり、『Aについて』という文字をクリックした時は#(このページの中にある)Aに移動しなさいという事が書かれているのです。
完成したページ内リンク
今度は移動先の位置を指定しましょう。
これが『アンカーポイント』です。
(例)上記の『Aについて』をクリックした時に移動したい場所を指定します。
JimdoはHTML5で書いてあるので、移動先に以下のタグを追加します。(文章を選び、HTMLの編集で保存します)
<div id="A">タイトルA</div>
もしアンカーを見出しにしたい場合は、<h2>なり<h3>なりを追加します。
移動先に<div id="A"><h2>タイトルA</h2></div>というタグを、埋めこみます。
<div id="A"></div> → ここにHTML編集でこのタグが埋めこまれています。
Aについて
Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明Aについての説明
戻る
<div id="B"></div> → ここにHTML編集でこのタグが埋めこまれています。
Bについて
Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明Bについての説明
<div id="C"></div> → ここにHTML編集でこのタグが埋めこまれています。
Cについて
Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明Cについての説明
<div id="D"></div> → ここにHTML編集でこのタグが埋めこまれています。
Dについて
Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明Dについての説明
コメントをお書きください
しつこい電話魔 (日曜日, 16 4月 2017 18:10)
これ、jimdoで使える半自動化の仕組み作ってください
https://www.bagsky.ru (火曜日, 24 9月 2024 09:30)
best quality Van Cleef & Arpels jewelry
http://www.bagsky.ru/Jewelry-19.html
designer jewelry replica selection for the very best in unique or custom
http://www.bagsky.ru/T-Set-130.html