サイトマップ ▼


NEWS
・2019/02/06 新着記事: 月間【1万 PV 達成!!】感謝と今後
・2018/11/03 新着記事: 【映画】スマホを落としただけなのに
・2018/10/14 新着記事: 【レシピ×可能性】

お願い ▽
自動広告で不適切なリンクが貼られることがあります。お気づきになられた場合は、「不適切な自動広告の報告」からご報告いただけると幸いです(回答は匿名のものです)。


【はてなブログ】ページ内リンクが上手くいかない時の対処 - id属性を使う

 

(▼ページ内ジャンプのイメージ)

f:id:game_walker:20181008174130j:plain

 

 

「同じ記事内で移動できるリンク」を貼りたいと思い、真っ先に次の記事を参照させていただきました。▼

ページ内リンク(ジャンプ)を使ってみる - 雪ん子’s report

 

修正前の方法

 

上のサイトでは、以下のコードを紹介しています。(はてなの編集画面で「HTML編集」を開き、”リンク元”と”リンク先" の文章に下のコードを書き加える)▼

 

<a href="#何でもいい識別名">リンク元の文章</a>

<a name="何でもいい識別名">リンク先の文章</a>

 

 

これを使うことで、「リンク元をクリックする」→「リンク先の場所に画面が飛ぶ」ようになる。何でもいい識別名のところは、適当に設定。

 

私もこの方法を使わせていただくことで、ページ内リンクを貼ることができました。

 

ただ、(後日判明したのですが)ページを更新する度に「1マスずつリンク先がずれる」という不具合が生じてしまっていました。

 

どうやら上のコードにある"name"を使う方法は、最近のHTMLに対応されなくなってしまっているようです。(参考記事:【HTML】name属性はもうやめよう。ページ内リンクも動かず、AMPエラーが出る。 – Jill Tone Blog

 

私と同じように戸惑ってしまう人もいると思ったため、記事を作ってみました。

 

※ただ時間が経って仕様が変わったというだけなので、紹介をしているブログを批判しているわけではないです。どうかご了承いただきたく存じます。

 

修正後の方法

 

それで、肝心の「修正後コード」は以下です。"name"ではなく"id"を使う方法。▼

 

<a href="#識別名">リンク元の文章</a>

<p id="識別名">リンク先の文章</p>

 

 

重要なのは1つだけ…そうっ!

id="識別名" をタグ内に加えること。

 

上の例では、元々コード内にあった"p"(=パラグラフを形成するタグ)の中に"id"(ID=固有の識別名という意味)を入れるケースを考えています。もちろん、"p" 以外のタグでも使えます。

 

 

修正後の方法 - ちょっと違うパターン

 

少しややこしいと思う人は、リンク先の前に"div"を使うのもありです。これを使う場合には、リンク先のタグ様式がなんであれ関係なくなります。

 

リンク先のところに、次のようにコードを書いておけばOK。

 

<a href="#識別名">リンク元の文章</a>

<div id="識別名">リンク先の文章</div>

 

 

※この方法は「"div"タグの中にさらに "p"タグがある」というような場合でも使えます。

 

※他にも <div id="識別名"></div>リンク先の文章 という順番にしてもOKです。ただこの場合、厳密には文章の前をリンク先にしているため、画面移動後の表示も若干上に来ます。

 

 

読んでいただきありがとうございます。

少しでも参考になれば幸いです。

お問い合わせ
プライバシーポリシー

Copyright ©game_walker All rights reserved.