ページ内リンク（記事の中でリンクする方法）
ページ内リンク、記事内の項目に戻れるようにリンクつける方法です。
私がネットで検索してそのページを見る場合、記事を全部読んでから、戻ってもう一度読み返したり、合わせて読みたいページに行ってみたいほうです
そうなると、気になる項目に戻りたくなります。
そのために上にスクロールしなくてはなりませんね。
だから、私は、最後の目次のようなものをつけたいと思っています。
いわゆる最後の目次状態ですね。
他にも、記事の中で参考にしてほしい時も使えるかと思います。
ページ内リンクは、HTMLで書く方法になります。
ただ、いろいろあるので端折っていくうちに、私流に直したら簡単になりました！！
記事内にリンクで行きたいところに飛びたい！ページ内リンク
記事内のリンクを飛ばしたい場所、見てほしい場所に名前を付けます。
①まずは、テキストに切り替えます。
②テキスト内の記事内で飛んでいきたいところに名前をつけます。
オレンジの部分を加え、緑の部分に名前を付けます。
<div id=”example”></div>
緑の部分は、任意で名前を付けます。
うちは、みずなのレシピのサイトでは、
<div id=”mizuna”></div>
『mizuna』と名付けました。
<h3 id=”link”>見出し3の場所ですよ。</h3>
表に飛びたいなら
<table id=”link”>
<tbody>
<tr>
<td>表にも飛びます</td>
</tr>
</tbody>
</table>
他にも使えるもの
span 、 form 等
パージ内リンクのとび先を実際につけてみましょう。
うちは、見出しに飛びたいことが多いので見出しで。
この記事で言う上の濃い文字の部分ですね。
この部分です。
①テキストに切り替え
②見出し部分を探し、
<h2>記事内にリンクで行きたいところに飛びたい！ページ内リンク</h2>
⇒<h2 id=”link”>記事内にリンクで行きたいところに飛びたい！ページ内リンク</h2>
と直します。
ページ内リンクの元、『こちらからどうぞ』など飛ばす元の設定
設定は簡単！
リンクURLを先ほどつけた名前の『＃example』とするだけです。
緑の部分は、自分がつけた名前のものを選択します。
『こちらからどうぞ』に、リンクを貼ります。
普段リンクを貼るのと一緒で、
①『こちらからどうぞ』にリンクを貼る。
URLには、#example と打ち込み、リンクを貼ります。
になれば貼れてます。
ページ内リンクを実際に貼ってみましょう♪
私は、見出し２に飛びます。
とび先に『#link』と名付けたので、
このように打ってリンクを指定します。
見出し２に飛びます。
色が変わってリンクのモードになれば大丈夫！
後は、自分の思ったところに飛んでいけば成功です♪
リンクがうまく飛ばないとき
うちもありました。
テキストに切り替えて、とび先を見てみてください。
1個でいいものが2個ついてますね。
これでは飛びません。
1つにしてもう一度更新して下さい。
これで飛べるようになってるはず。
ページ内リンクまとめ
[box03 title="ページ内リンクをする方法"]
- 飛んでいきたい先に id=”example” と任意で名前を付ける。
- こちらからと案内する元に、＃example と打ち込みます。
- 案内元から自分が思った場所に飛べれば成功です！
[/box03]
言葉にするととても難しいですね。
分かりにくいことがあったらお問い合わせ下さい。
