こんにちは、まちゃりさです。
今回は、私が普段ブログを書くときによく利用している「ページ内ジャンプ機能（リンク）」の作り方について、ご紹介します。
やり方を覚えれば誰でも簡単にできるので、ぜひ試してみてください。
それでは、どうぞ！
ページ内ジャンプって何？
ページ内ジャンプ機能（リンク）って何？
リンクをクリックするだけで、記事内の指定した位置までスクロール（移動）できる機能です。
イメージは、次のような感じ。
↓下のリンクをクリックすると・・・
どんなときに使えばいい？
読者が記事のポイントを読み返したり、読み飛ばすことができるように使っています！
- 「前述したとおり～」の表現にリンクをつけて読み返せるように設定するとき
- 「まとめ」のポイントにリンクをつけて読み返せるように設定するとき
- 読み飛ばしていい部分にリンクをつけて読み飛ばせるように設定するとき
→読者目線で読みやすい記事を作成する際に、便利です。
まとめのポイントにリンクをつけて読み返せるように設定したり、
読み飛ばしていい部分にリンクをつけて読み飛ばせるように設定したりできます。
まずは、作ってみましょう(‘ω’)ノ
ページ内ジャンプ（リンク）の仕組みと作り方
ページ内リンク（ジャンプ）は、HTMLファイルでアンカー要素（aタグ）を記述し、動作させることが可能です。
よくわからない人へ！要するに・・・
→HTMLコードを記載することで、ジャンプリンクは作成できます！
やり方を覚えれば簡単に作成できます。
さっそく作ってみましょう。
手順1. 飛びたい位置のタグにidを指定する
ここに飛びたい！と思う場所（ジャンプ先）のタグに「id名」をつけます。
例えば、あるh2見出しにジャンプしたいと思ったら、次のように見出しを書き換えます。
<h2 id="link1">見出し</h2>
ちなみに、本来のh2見出しはこんな感じ↓
<h2>見出し</h2>上記の<h2>の中に[(半角スペース)id=”id名”]を追記します。
「id=」の後ろには、””（ダブルクォーテーション）で囲ったid名を記載します。
id名は、自分で自由に指定します。半角英数字の組み合わせであれば何でもOKです。
手順2. ジャンプボタンを作る
次に、ここから飛びたい！と思う場所（ジャンプ元）にリンクをつけます。
たとえば「ここをクリック！」という名前のジャンプボタンを作りたければ以下のように書きます。
<a href="#link1">ここをクリック！</a>ジャンプボタンは通常のリンクと同じようにaタグで作りますが、URLのかわりにhref=”#ジャンプ先のid名”というように書きます。
#をつけるのがポイントです。
ビジュアルエディタを使用している場合は、通常のリンクをつける感覚でジャンプボタンをつけることも可能です。
リンクをつけたい文字列を選択し、リンクボタンをクリック。
半角の♯とジャンプ先のid名を入力し、確定させます。
今回は、例としてリンク先に「#link1」と入力しました。
これでジャンプボタンの完成です。
プレビューで確認します。
クリックすると、指定したid先に遷移します。
別ページの途中に飛ぶ方法
ブログ記事の別ページの途中にジャンプしたい場合もあるかもしれません。
このような場合の設定手順をご紹介します。
手順1. 飛びたいページの飛びたいタグにidを指定
先ほど同様、ジャンプしたい位置にあるタグにid名をつけます。
<h2 id="link2">見出し</h2>手順2. “ページのURL#id名”をリンク先としたaタグを作る
a href=”〜”の中を“飛びたいページのURL#id名”とします。
飛びたいURL先が「/cocoon」だとすれば、<a href=”https://macharisa.com/cocoon#link1“>という感じ。
▼ 記入例
これで指定したURLのページ内に飛ばすことができます。
さらに#のついたidのタグの位置までジャンプしてくれます。
まとめ：ページ内ジャンプ機能（リンク）は簡単に作れる！
いかがでしたか？
今回は、ページ内ジャンプ機能（リンク）の作成方法についてご紹介しました。
例えば、ブログ記事のボリュームが長くなった場合、読者を離脱させないために効果的です。
ぜひ、ブログ記事を書くときに活用してみてください。
それでは、今回はこの辺で終わります。
最後までお読みいただき、ありがとうございました。
コメント