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

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

<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についての説明文についての説明文についての説明文についての説明文についての説明文についての説明文についての説明文についての説明

戻る

タイトルC

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

戻る

タイトルD

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

戻る

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

まずは移動元(リンクを書きます)

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についての説明


戻る


この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

コメントをお書きください

コメント: 1
  • #1

    しつこい電話魔 (日曜日, 16 4月 2017 18:10)

    これ、jimdoで使える半自動化の仕組み作ってください

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422