【簡単!】ページ内リンクの作成方法 簡単な2つのステップ

こんにちは!ハマカナです。

私が作成している記事で、最後に問題を記載して、その答えが記事内にあるものがあります。

その答えを、わざわざ固定ページを作成してリンクを付け、固定ページにジャンプさせる行為は大変面倒ですよね。

記事内に答えがあるのであれば、記事内にジャンプしてもらいたいですよね。

今回は、その方法が簡単にできてしまうので、その方法をご紹介させて頂ければと思います。

ちなみにプラグインで「Easy Smooth Scroll Links」等というページ内リンク作成のツールがありますが、私はお薦めしません。理由は2つ。プラグインを使わなくても簡単だから。プラグインに頼りすぎるのが嫌い(個人的理由)だからです。

ページ内リンクの作成方法 1ステップ目

まずは、ジャンプ元を作成しましょう。

簡単です。下記のコードを記事内に記入するだけです。

答えは<a href="#01">こちら</a>

このコードを記入すると、実際の記事内ではこのように表示されます。

答えはこちら

1ステップ目はこれだけです。後はジャンプ先を作成するだけです。

念のため、上記のコードを作成する際のポイントを下記に記載します。

ポイント

  1. 「#01」がジャンプ元のコードです。数字でなくも良いので自由に設定してください。(例:a,a12,+++等でも良い)
  2. 「#01」は記事内で被らないように設定してください。(例:#01を作ったら、次は#02など必ず被らないように設定すること)

ページ内リンクの作成方法 2ステップ目

次はジャンプ先を作成しましょう。

こちらも簡単です。下記のコードを記事内に記入するだけです。

<a id="01"><!--01--></a>

このコードを記入すると、実際の記事内ではこのように表示されます。


そうです。何も記載されません。だがそれでいいんです。見えないアンカーを設置したようなものとお考え下さい。

2ステップ目もこれだけです。

念のため、上記のコードを作成する際のポイントを下記に記載します。

ポイント

  1. 「01」がジャンプ先のコードです。ジャンプ元で設定した「#01」の「#」を除いたものを記入してください。

まとめ

以上でページ内リンクを作成することができました。

もう興味本位でクリックした人もいるかと思いますが、ステップ1で作成したジャンプ元のコードをクリックすると、ステップ2で作成したジャンプ先のコードにページがジャンプするはずです。

まだクリックしていない人のために、ジャンプ元のコードを下記に作成します。

答えはこちら

いかがでしたか。これでページ内リンクはばっちりかと思います。