ブログを書いていると、記事内にページ内リンクを張りたい。というケースがでてきますよね。この記事では、html・cssはよくわからん！という方に向けて、ページ内リンクのつくり方をご紹介します。とても簡単なのですぐにマスターできますよ～
※ページ内リンクは、プラグインを使って張る方法もありますが、プラグインを使いすぎるとブログが重くなるので、今回はプラグインを使わないでページ内リンクを張る方法をご紹介します。
ページ内リンクとは
※ページ内リンクの意味をすでに知っている方はこちらからどうぞ。 ⇒ ページ内リンクの張り方
これがページ内リンクです。
ページ内リンクの意味を知っている方は、「ページ内リンクとは」を読んでもあまり意味がないですよね。なのでそういう読者さんには、次の章「ページ内リンクの張り方」から読むことをお勧めする。一例ですが私はページ内リンクをこういう時に使います。
ブログを続ける上でこういった読者目線はとても大切なので、是非ページ内リンクの使い方をマスターしましょう。
ページ内リンクの張り方
手順①ジャンプしたい場所にidを付ける
まずは、ジャンプしたい場所にidを付けます。一般的なブログの場合、ジャンプ先は見出しのケースが多いです。先ほどの例でいうと、この章の見出し「ページ内リンクの張り方」にジャンプしました。記載したコードは次の通りです。
|
1 |
<h2 id="a">ページ内リンクの張り方</h2> |
<h2>は見出しダグですね。この見出しタグにidを付けて<h2 id=”任意のid名”>のように書きます。（※もちろんh2だけでなくh3、h4などの見出しタグにも使えます。その場合はh3、h4に変えて下さい。）
任意のid名は、アルファベット・数字なら基本何でもOKですが、注意点が2つ。
- 記事内で同じidは使えない。違う記事ではればOKです。
- 数字から始まるid名は推奨されていない。（確認したら一応ジャンプは出来る。）
（例）
<h2 id=”a”> ⇒OK
<h2 id=”ABC”> ⇒OK
<h2 id=”123″> ⇒NG（数字で始まるid名は推奨されていない。）
手順②リンクを張る
続いて、リンクを張ります。今回のケースだと下記の部分ですね。
記載したコードは次の通りです。
|
1 |
<a href="#a">ページ内リンクの張り方</a> |
<a href=”#さっき付けたid名>リンク先の名前</a>のように書きます。今回の例では、さっき付けたid名は「a」なので、<a href=”#a”>リンク先の名前</a>と書いたわけですね。
「#」のつけ忘れに注意です。私はついつい忘れがちで、これが原因でジャンプしてくれないことが多いので！
ページ内リンクのコードまとめ
最後に、ページ内リンクに使うコードをまとめておくのでコピペしてご活用ください。
|
1 2 3 4 5 |
/* ジャンプ先に記載するコード */ <h2 id="任意のid名">見出し</h2> /* リンクに張るコード */ <a href="#任意のid名">リンク先の名前</a> |
※見出しがh2ではなくh3、h4の場合は、h3、h4に変えて下さい。
※「任意のid名」には自分で決めたid名を入れて下さい。
それでは、今日も最後までお読みいただきありがとうございました。また明日！
