Jimdoにアンカーポイントを作りたい

アンカーポイントとは、移動先の印のことです。

<a>というタグはリンクに移動させるためのタグだと思っていませんか？

Ａタグというのは、リンクタグと呼ばれるものでクリックした時に、リンク先に移動させるために書くことが多くＡ＝アンカー（anchor）の略です。

アンカーとはイカリのことで船が勝手に移動しないよう固定する時に使います。
つなぎ留めるという意味から、移動先と、リンク元を結びつけるタグとしてアンカーという名前がついたのです。　知らんけど。　たぶんそうです（笑）

アンカーを使って同じページ内に移動先を指定することが出来ます。

ホームページって、だいたい下のような形をしていますよね？
ここでは、Ａについてをクリックすると「タイトルＡ」に、Ｂについてをクリックすると「タイトルＢ」という同じページ内の指定箇所に移動するように、作る方法を説明しています。

ヘッダーと呼ばれたりする部分
アンカーポイントの作り方

■ＡＢＣＤについての解説

｜Ａについて｜Ｂについて｜Ｃについて｜Ｄについて｜

タイトルＡ

Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文Aについての説明文

戻る

タイトルＢ

Ｂについての説明文Ｂについての説明文Ｂについての説明文Ｂについての説明文Ｂについての説明文Ｂについての説明文Ｂについての説明文Ｂについての説明

戻る

タイトルＣ

Ｃについての説明文Ｃについての説明文Ｃについての説明文Ｃについての説明文Ｃについての説明文Ｃについての説明文Ｃについて

戻る

タイトルＤ

Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文Ｄについての説明文

戻る

フッター（Copyrightなんかが書いてあったりする。）

まずは移動元（リンクを書きます）

Ａについて｜Ｂについて｜Ｃについて｜Ｄについて

まず、リンクする文章を用意します。

１）上記を入力したあと、ＨＴＭＬの編集を開きます。

　<p>Ａについて｜Ｂについて｜Ｃについて｜Ｄについて</p>

２）この場所を以下のように書き換えます。

３）<p><a href="#A">Ａについて</a>｜<a href="#B">Ｂについて</a>｜<a href="#C">Ｃについて</a>｜<a href="#D">Ｄについて</a></p>

４）書き換えたら保存ボタンを押します。

hrefに書かれている『#』の意味

『#』は、現在居るページの事です。

つまり、『Ａについて』という文字をクリックした時は＃（このページの中にある）Aに移動しなさいという事が書かれているのです。

完成したページ内リンク

Ａについて｜Ｂについて｜Ｃについて｜Ｄについて

今度は移動先の位置を指定しましょう。

これが『アンカーポイント』です。

（例）上記の『Ａについて』をクリックした時に移動したい場所を指定します。

JimdoはHTML５で書いてあるので、移動先に以下のタグを追加します。（文章を選び、ＨＴＭＬの編集で保存します）

<div id="A">タイトルＡ</div>

もしアンカーを見出しにしたい場合は、<h2>なり<h3>なりを追加します。
移動先に<div id="A"><h2>タイトルＡ</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についての説明

戻る

Jimdo Tips コンテンツに戻る

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。