スポンサーリンク

ページ内リンクの作り方は、たいていこのように説明されています。

ページ内リンクのHTML5の記述
①アンカー要素(aタグ)のid属性で属性値を指定する(※属性値は任意)
  例: <a id="title">タイトル</a>   id属性値 title 
②アンカー要素(aタグ)のhref属性の属性値に①で指定したidを#(半角シャープ)を付けて指定する
  例: <a href="#title">タイトルの位置へジャンプする</a>

例えば検索して見つけたサルカワさんのページ。
         ⇒ 記事の途中に飛ばすには

ここで説明されているように、上の囲み記事の①→②の順に設定する説明になっています。

  1. 目的地となる「飛び先」を決めてから
  2. 飛び出す位置(飛ぶボタン=ジャンプボタン=#付きid)をきめる。

これは始めにidをきめて、次ぎにそのidに#を付け加える、という説明になっているからです。

おば半はどうしてもこれだと混乱するので、この逆の順にやります。
まず設定するのは、クリックする文字列ではなく、飛び先、目的地(アンカー)を設定します。
次ぎにクリックする文字列を決めるんです。
#idを決めて、次ぎにその#を外したidを設定する。

 

どっちが先でも同じなんだろうけど、クリックすると→飛ぶ という行動の流れが頭にあるから、設定する順番も同じ流れでやった方が混乱しない、と思うのです。

 

1. ジャンプボタンを作る 《=リンク》

*ジャンプボタン!わかりやすい。これ、クリックしたら飛ぶよ、ジャンプするよ~、っていうボタン。

ジャンプボタンは通常のリンクと同じようにaタグで作りますが、同じURLなので、URLのかわりに
href="#id名"
というように書きます。id名は任意の英数文字です。
ここでは#をつけるのがポイントです。

たとえば「ここをクリック!」という名前のジャンプボタンを作りたければ以下のように書きます。
<a href="#abc">ここをクリック!</a>
abc がid名です。任意の英数文字。これに#をつけます。

読むときは、リンク設定した文字列をクリックして → アンカー設定した飛び先に行くのだけど、記事作成の段階の作業は逆の順にやる説明になっているから混乱する。
(私だけ!?)(笑)

#idの部分から → #なしのidの部分にとぶ

これさえ覚えときゃ良いのです。

 

2. 飛びたい位置のタグにidを指定する《=アンカー》

飛びたい!行き先部分にid名をつけます。クリックして到達する場所。飛び先になる部分です。

例えば、あるh2見出し(例:「●●の理由」という見出し)にジャンプしたいなら以下のように書きます。

<h2 id="id名">●●の理由</h2>

この場合、「●●の理由」は「見出し」なので<h2></h2>ではさまれていますよ。
「見出し」ではなく、単に
ページ内の好きな位置の場合は<h2></h2>必要ないわけで、単に特定の文字列にすればいいのです。

<a id="id名">文字</a> 
 

HTML5 からは
<a name="title">タイトル</a> は推奨されていない。

 

3 違うページの特定の場所に飛ぶ

違うページの途中にジャンプしたいときは、ジャンプボタンを次のように指定します。

① ページのURL#id名 

同じページの場合は#id名 だけでしたが、その前に飛びたいページのURLを加えます。

<a href="URL#id">文字列</a>

例:<a href="https://kriws.com#abc">文字列</a>

別ウィンドウで開くなら、id"の後ろに target="_blank" をくっつけます。

<a href="URL#id"target="_blank">文字列</a>

例:<a href="https://kriws.com#abc"target="_blank">文字列</a>

 

② 飛びたいページの飛びたいタグにidを指定
さきほどと同じで、ジャンプしたい位置にある文字列に#を外したid名をつけます。

「TinyMCE Advanced」のアンカーボタンを使ってやるのと同じで、このやり方でも、飛ぶ先は数行ズレてしまいます。
ずれる原因はCSSのレイアウトの関係なので。
仕方が無いから、何行ズレるか考慮してその分上の位置に「飛び先」(=アンカー)設定しています。
スポンサーリンク
おすすめの記事