それと
この2つについて書いていきます。
とはいえ、どっちもただのアンカーリンクなんです。
リンク先の指定の仕方が、ちょ〜〜〜っと違うだけなんです。
なので一回わかれば、めっちゃ簡単＆単純な話。
実際にリンクの挙動を体感できるように、この記事内にもリンクを作って設置してます。
なので理解しやすい！！
あとぼくがやって、うまくいかなかった方法も書いておきました。
コピペで内容ちょっと書き変えるだけで、お手軽にそのまま使ってもらえるようにしてますので、ブクマして忘備録などにも活用して下さい(^^)/
では、いきましょう！
ページ内リンク・アンカーポイントを指定したアンカーリンクを作るときの、基本的な考え方
結局どちらもアンカーリンクなので、基本的に全く同じ考え方です。
- 出発点を作る（＝アンカーリンクを作る＆着地点の名前を決める）
- 着地点を作る（＝決めた名前を書き込む）
ただこれだけ。
すんごいシンプル！！
もっと直接的に言うと、
- 出発点＝クリックするリンク
- 着地点＝クリックして飛んだ先にある文章（hとかpとかdivとかの要素）
ページ内リンクの作り方
「出発点」と「着地点」に分けて説明します。
1.出発点を作る
まず、出発点をこんな風に作ります。
<a href="#go">ここをクリックすると、、、</a>上文の大事な点を解説すると、
<a href=""></a>＝アンカーリンクの基本形- go＝着地点の名前（頭には必ず「＃」を付けること。）→好きな名前でOK！
- ここをクリックすると、、、＝リンクテキスト→好きな文章でOK！
こんな感じ。
実際はこのアンカーリンクを、pやdivなどの要素の中に入れて使って下さい。
2.着地点を作る
で、今度は着地点に、さっき決めた名前（＝go）を書き込みます。
着地点はp、h2、h3でもdivでもspanでも、ほぼなんでもOKです。
たとえば、今回はp要素にさっき決めた名前を書き込みます。
<p id="go">ここに飛びます！！</p>上文の大事な点を解説すると、
<p id=""></p>＝p要素に名前を付けるときの基本形- go＝着地点の名前（こっちは「＃」いらない。）
- ここに飛びます！！＝表示したいテキスト→好きな文章でOK！
これだけで、もう完成です！！
で、実際にこの記事内で作ってみました！！
試しに↓↓↓の黄色ボックス内のリンクを、クリックして下さい。
こんな感じです(^o^)/
【補足】こうやるとうまくいかない。。。。
これ、うまくいかなかったんです。。。
パソジユの目次は、プラグイン「すごいもくじ[PRO]（バージョン 20180831）」で自動的に作っているんです。
で、あるときページ内の見出し<h2>注意！！</h2>に飛ぶリンクを作りたくて、プラグインが自動的にその見出しにつけた名前を調べ、その名前を書き込んでページ内リンクを作ったんですが。。。
2回目以降はクリックしても、全く反応しない。
ですが一応、機能を回復させる方法がありまして、、、
- いったんその記事以外のページに移動して、またその記事に入る
- 閲覧履歴をクリアして、また新しくサイトにアクセスする（ちなみにスーパーリロードしてもダメ。）
- 記事の目次のどれかをクリックすると、また反応するようになる。
ただし、1回限りだし、これをやっても反応が回復しないときもある。
でもこんなの、使い物になりませんよね？
なので以下の点だけ注意して下さい。
これを、忘れないでください。
決して、プラグインが悪いってことではないです。そうじゃなくて、プラグインの仕組みが、はっきりわからないのに自動生成したものを使うと、ぼくのようにうまくいかない可能性がありますよって話です。
ページ内リンクの記述のバリエーション
「a href=""」の””の中身、つまり名前部分の記述方法がいくつかありますので、一応書いておきます。
また、下の3つのリンクをクリックすると、ここに戻ってくるようになってます。
ちょっと画面を上か下にズラしてからやると、わかりやすいかもです。
省略系＝さきほど紹介した記述方法
<p><a href="#go2">ページ内リンクの記述のバリエーション</a></p>
実際このコードで作ったのが、下のリンクです。
省略しないでフルURL
外部リンクみたいにこう書いても機能します。（メリットは感じませんが汗）
<p><a href="https://paso-jiyu.com/in-page-link-anchor-link/#go2">ページ内リンクの記述のバリエーション</a></p>
実際このコードで作ったのが、下のリンクです。
別タブで開かせる
単に移動ではなく、別タブで開かせることもできます。
<p><a href="https://paso-jiyu.com/in-page-link-anchor-link/#go2" target="_blank" rel="noopener noreferrer">ページ内リンクの記述のバリエーション</a></p>
「rel="noopener noreferrer"」で、脆弱性の対策もしっかりしています。
実際このコードで作ったのが、下のリンクです。
別記事・外部記事の指定した見出し・文章（要素）に飛ぶリンクの作り方
たとえば、別の記事のh2見出し「ブロガーに必要なツール7選！！」に飛ばしたいときなど。
こういうときは文章中のその見出し自体をクリックするか、または目次にあるその見出しをクリックすると、ブラウザのURLバーに「https://paso-jiyu.com/記事名＃〜」と表示される。ので、そのURLをアンカーリンクに貼り付けることで作れます。
そういうときは、ブラウザの機能でページのソースコードを見て、その要素についてる名前を直接確認しましょう。
では実際の作り方に行きます。
別タブで開かせる
<p><a href="https://paso-jiyu.com/how-to-start-a-blog/#st-toc-h-21" target="_blank" rel="noopener noreferrer">ブログを始めた人に必須のツール8選！！</a></p>
これも先ほどと同様、「rel="noopener noreferrer"」で、脆弱性の対策もしっかりします。
上記コードで作ったのが、下のリンクです。
そのままのタブで開かせる（別タブにしない）
<p><a href="https://paso-jiyu.com/how-to-start-a-blog/#st-toc-h-21">ブログを始めた人に必須のツール8選！！</a></p>
こちらも上記コードで作ったのが、下のリンクです。
ページ内リンクの実験室
ここはこの記事の実験で使ってるだけの文章なので、飛ばして「まとめ」へお進み下さい。
まとめ
以上、こんな感じです。
ページ内リンク・アンカーポイントを使いこなしましょう！！
ほとんど自分のための忘備録っぽくなってるとこは、お許しくださいm(_ _)m汗汗
でも、あまりごちゃごちゃ余計なこと言わないほうが使いやすいかと思って、こんな感じにしてみました(^o^)/
