HTML初心者でもわかる指定したテキストへジャンプさせるコードの書き方

私がこの機能を欲しいと思ったのは、

プラグインを使用せずに記事の目次を作ろうと思った時でした。

ただ目次があるだけでなく、どうせならその目次をクリックしたらその場所までジャンプできるようにしておきたいですよね。

１つのページ内の指定箇所へジャンプする方法

まず１つのページ内の指定箇所へジャンプする方法ですが、とても簡単です。

例えばこの記事の目次ですが、

読みたいタイトルをクリックすればその場所までジャンプできるようになっています。

目次のボックスの中のテキストは下記のようになっています↓

目次

<ol>
   <li><a href="#link01">１つのページ内の指定箇所へジャンプする方法</a></li>
   <li><a href="#link02">他のページの指定箇所へジャンプする方法</a></li>
   <li><a href="#link03">まとめ</a></li>
</ol>

<ol>や<li>のタグは目次をリスト表示させるためのものなので今回は関係ありません。

必要なのは<a href=”#link01″></a>です。

<a href=”#link01″>ジャンプ元のテキスト</a>

このように書きます。

ワードプレスのテキストエディターにそのまま書けばいいのです。

そして、目次の<a href=”#link01″>１つのページ内の指定箇所へジャンプする方法</a>の場合、

ジャンプ先の指定の書き方は、

<h2 id=”link01″>１つのページ内の指定箇所へジャンプする方法</h2>

このように書きます。

今回の例では目次のため、ジャンプ先は見出しなので<h2>タグにしていますが、

特になんでもないテキストへジャンプさせたい時は、

<p>タグででも囲ったらいいでしょう。

こんな感じで↓

<p id=”link01″>ジャンプ先のテキスト</p>

超簡単に説明すると、

<a href=”#link01″>ジャンプ元のテキスト</a>←こう書けば

<p id=”link01″>ジャンプ先のテキスト</p>←ここにジャンプさせることができます。

ルールとして、ジャンプ元の#link01ですが、

#は必須です。

link01の部分は、自分が把握しやすい文字でOKです。

ジャンプ先のコードには””の間に、#を外したジャンプ元の文字を入れればOKです。

例えばこんなんでもいいのです↓

<a href=”#kangoshi“>ジャンプ元のテキスト</a>

<p id=”kangoshi“>ジャンプ先のテキスト</p>

簡単じゃないですか？

すぐできますよ！

他のページの指定箇所へジャンプする方法

例えば他のページの見出しや、どこか文章の途中にジャンプさせたい時があるじゃないですか、

そんな時は上で紹介した書き方の応用で、

<a href=”https://nurse-bears.com/2018/08/05/wordpress-index-plugin/#link01″>ジャンプ元のテキスト</a>←このように書けば、

<p id=”link01″>ジャンプ先のテキスト</p>←上で指定したURLのページの、指定したテキストへジャンプすることができます。

なんかごちゃごちゃ長くなったと思うかもしれませんが、

今回はジャンプ先のページのURLが入ってるだけです。

基本はこうです↓

<a href=”ジャンプ先のURL#link01″>ジャンプ元のテキスト</a>←ジャンプ先のURL追加

<p id=”link01″>ジャンプ先のテキスト</p>←こっちは変わりません。

試しにここを押してジャンプしてみてください。

・・・

どうでしたか？戻ってこれましたか？

こんな感じでとても簡単ですし、使いこなせるとかなり便利ですよね！

まとめ

今回はこの２つをご紹介しました。

２つに共通しているのは、今回は例として「link01」としているだけなので、ここの部分は自分の覚えやすいものに変えてOKという点です。

WordPressで簡単に目次を作成！Easy Table of Contentsの設定方法 ワードプレスでブログやアフィリエイトを始めたあなた！ そろそろ目次を自動で作ってくれるプラグインをお探しではないでしょうか...