テキストや画像をクリックすると、自動的にページ内にジャンプ（スクロール）させる方法を知りたい、そこのあなた。
[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/34bbd51748d6e02491ea70f2036702a9.jpg" name="エリザベス" type="l big icon_blue"]ようこそ（welcome）[/voice]
今回はサクサクっと、ページ内ジャンプ（リンク）を作成する方法について解説していきます^^
ページ内ジャンプって何？
飛びました！
こんな感じで、リンクをクリックするだけで、指定した位置までスクロール（移動）させることが出来ます^^
ページ内ジャンプ（リンク）の仕組みと作り方
ページ内ジャンプの仕組みはこんな感じ。
[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/7f2b4aeff72660374f467b384801215d.jpg" name="まさこ" type="l big icon_blue"]何となく分かるような・・・分からないような？ちょっとややこしいね・・・[/voice]
以下で作り方について詳しく説明していきます^^
手順①まずはジャンプ先のアンカーを作る
[aside type="boader"] ①<a name="アンカー名">文字・画像</a>[/aside]
または
[aside type="boader"] ②<h2 id="アンカー名">文字</h2>[/aside]
このどちらかを使います。ちなみに私は、
- 文字や画像にジャンプさせる時は①
- 見出しに飛ばす時は②
を使っています^^
アンカー名を作りましょう^^
[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/2.jpg" name="殿" type="l line"]アンカーっていうのは、目印って感じの意味で、好きな文字（半角英数字）を付けることが出来るよ[/voice]
[keikou]例えば・・・アンカー名を『a1』（お好きな半角英数字でOK！）とします。[/keikou]
①指定の文字や画像へジャンプさせる場合
[aside type="boader"] <a name="a1">文字・画像</a>[/aside]
②見出しにジャンプさせる場合
[aside type="boader"]<h2 id="a1">文字</h2> [/aside]
[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/2.jpg" name="殿" type="l line"]ココでは見出し（ｈ2）として書いてるけど、もちろん（ｈ3）や（ｈ4）の時は、見出しタグに合わせてね[/voice]
手順② ジャンプ元（リンク）ボタンを作る
次に、ジャンプ元（リンク）を作ります。
通常のリンクと同じようにaタグを使うのですが、URLの代わりに、『手順①』で作成したアンカー名を入力します。つまり・・・
[aside type="boader"] <a href="#アンカー名">ここに文字や画像</a>[/aside]
▼▼▼▼▼
[aside type="boader"] <a href="#a1">ここに文字や画像</a>[/aside]
[keikou]これでジャンプ先・ジャンプ元（リンク）が完成しました^^[/keikou]
[voice icon="https://mirai-kitte.co.jp/wp-content/uploads/2017/08/6.jpg" name="まさお" type="l big icon_blue"]すごく単純なことなんだけど、少しややこしいね[/voice]
まとめ：ページ内ジャンプは簡単に作れる！
サクサクっと説明しましたが、ページ内ジャンプは簡単に作ることが出来ます^^
文字数が多いときや、指定の箇所へ飛んでもらいたい時など、ユーザー目線に立った時「あると便利かな？」と思う箇所に是非使ってみてください^^
おっしまーい！^^
▼次はこちらの記事がおススメ！▼
[kanren url="https://mirai-kitte.co.jp/archives/4803.html"]
