ブログ運営

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

ブログ運営
くまえもん
くまえもん
ドーモ!道楽者看護師夫婦、夫のくまえもんデス。

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

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

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

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

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

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

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

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



目次

<ol> <li><a href="#link01">1つのページ内の指定箇所へジャンプする方法</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″>1つのページ内の指定箇所へジャンプする方法</a>の場合、

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

<h2 id=”link01″>1つのページ内の指定箇所へジャンプする方法</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://kasouya-blog.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>←こっちは変わりません。

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

・・・

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

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

まとめ

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

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

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

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

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

<a href=”ジャンプ先のURL#link01″>ジャンプ元のテキスト</a>←①の応用で#の前にジャンプ先のURLを追加

<p id=”link01″>ジャンプ先のテキスト</p>←ジャンプ先のページの指定したいテキストへコードを書く。

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

あわせて読みたい
ブログ運営
WordPressで簡単に目次を作成!Easy Table of Contentsの設定方法 ワードプレスでブログやアフィリエイトを始めたあなた! そろそろ目次を自動で作ってくれるプラグインをお探しではないでしょうか...
ABOUT ME
くまえもん
くまえもん
このサイトの管理人。転職を繰り返した末、安定を求めてとりあえず看護師の国家資格を取得するも、やはりもっと自由に生きたいと願い、収入を増やすため副業にチャレンジし始めたとある漢!

COMMENT

メールアドレスが公開されることはありません。