音楽聴き放題 30日間無料体験

ページ内の任意の箇所に飛ぶリンクを貼るには

ページ内の任意の位置にリンクを貼るには、タグ要素にidをつけ、リンクに URL#id とすることで実現できます。

idで使える文字や制限事項

HTML5
  • 空白以外全ての文字が使用可能。
  • 英字の大文字小文字は区別されます。
  • 同ページ内でid被りがあってはいけません。
  • すべての要素にidが指定できる。
HTML4.0.1
  • 使える文字は半角英字[ A-Z a-z ]、半角数字[ 0-9 ]、アンダースコア[ _ ]、ハイフン[ - ]、コロン[ : ]、ピリオド[ . ]
  • 先頭の文字は必ずアルファベット(半角英字)
  • 英字の大文字小文字は区別されます。
  • 同ページ内でid被りがあってはいけません。
  • id指定出来ない一部要素がある。

見出し要素にidをつけてみる

ビジュアルエディタ上では、要素にidをつけることは出来ません。
テキストエディタに切り替えてidを付け加えます。

ビジュアルエディタで適当に見出しを作りました。
ビジュアルエディタ

テキストエディタで見るとこのようになっています。
テキストエディタ編集前

ここに id属性 を追記します。
テキストエディタ編集後
id="hl-a"
と追記しました。
見た目は代わりませんが、これでidがつきました。
次はここにジャンプが出来るようにリンクを貼ってみます。

ページ内リンクを作成

同じページ内でのリンクは #id だけを記述します。
URL#id でも同じ位置にジャンプすることが出来ますが、ページ全体が再読込されてしまいます。
テキストエディタでidを記述する時は id="id名" と、ダブルクォーテーションでidを囲っていましたが、リンクを貼る時はダブルクォーテーションは書きません。

見出しAへジャンプ

記事作成画面で実際の入力はこちら
見出しA


見出しBへジャンプ

記事作成画面で実際の入力はこちら
見出しB


例として見出しにidを付けていましたが、見出し以外の要素にもidをつけてジャンプすることが可能です。

画像にジャンプ

記事作成画面で実際の入力はこちら
画像A

見出しA

こちらの見出しは、テキストビューで見ると下記のようになっています。

<p id="hl-a" class="hh hh14">見出しA</p>

見出しB

こちらの見出しは、テキストビューで見ると下記のようになっています。

<p id="hl-b" class="hh hh14">見出しB</p>

画像
こちらの画像はテキストビューで見ると下記のようになっています。

<img id="pict-a" class="alignnone 〜

別ページへのリンク

別ページの任意の位置にリンクを貼る場合は、URLに続けて#idを記述します。
URL#id

ショートコードの作り方

上記リンクはこのようになっています。

https://pera-lab.com/wordpress-memo/wordpress-function#shortcode

記事作成画面で実際の入力はこちら
外部リンク

初心者の罠

ページ内リンクに飛んでも、なんか表示がずれてる?と思ってひとしきり悩んでいたのですが…
見出しが隠れている

これは結局…
管理ツールバーが隠している
WordPressにログインしているから、管理ツールバーが表示され、見出しが半分ずれていると誤解していただけでした。

初心者あるあるかな?と思ったのでメモとして残してみました。

参考 id属性HTML5日本語訳 参考 id名/class名に使用できる文字の種類GitHub

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です