こんにちは!ハマカナです。
私が作成している記事で、最後に問題を記載して、その答えが記事内にあるものがあります。
その答えを、わざわざ固定ページを作成してリンクを付け、固定ページにジャンプさせる行為は大変面倒ですよね。
記事内に答えがあるのであれば、記事内にジャンプしてもらいたいですよね。
今回は、その方法が簡単にできてしまうので、その方法をご紹介させて頂ければと思います。
ちなみにプラグインで「Easy Smooth Scroll Links」等というページ内リンク作成のツールがありますが、私はお薦めしません。理由は2つ。プラグインを使わなくても簡単だから。プラグインに頼りすぎるのが嫌い(個人的理由)だからです。
ページ内リンクの作成方法 1ステップ目

まずは、ジャンプ元を作成しましょう。
簡単です。下記のコードを記事内に記入するだけです。
答えは<a href="#01">こちら</a>
このコードを記入すると、実際の記事内ではこのように表示されます。
答えはこちら
1ステップ目はこれだけです。後はジャンプ先を作成するだけです。
念のため、上記のコードを作成する際のポイントを下記に記載します。
ポイント
- 「#01」がジャンプ元のコードです。数字でなくも良いので自由に設定してください。(例:a,a12,+++等でも良い)
- 「#01」は記事内で被らないように設定してください。(例:#01を作ったら、次は#02など必ず被らないように設定すること)
ページ内リンクの作成方法 2ステップ目

次はジャンプ先を作成しましょう。
こちらも簡単です。下記のコードを記事内に記入するだけです。
<a id="01"><!--01--></a>
このコードを記入すると、実際の記事内ではこのように表示されます。
そうです。何も記載されません。だがそれでいいんです。見えないアンカーを設置したようなものとお考え下さい。
2ステップ目もこれだけです。
念のため、上記のコードを作成する際のポイントを下記に記載します。
ポイント
- 「01」がジャンプ先のコードです。ジャンプ元で設定した「#01」の「#」を除いたものを記入してください。
まとめ
以上でページ内リンクを作成することができました。
もう興味本位でクリックした人もいるかと思いますが、ステップ1で作成したジャンプ元のコードをクリックすると、ステップ2で作成したジャンプ先のコードにページがジャンプするはずです。
まだクリックしていない人のために、ジャンプ元のコードを下記に作成します。
答えはこちら
いかがでしたか。これでページ内リンクはばっちりかと思います。