■ブログ運営

ページ内ジャンプ(リンク)の作り方【記事の途中に飛ばす方法について】

テキストや画像をクリックすると、自動的にページ内にジャンプ(スクロール)させる方法を知りたい、そこのあなた。

 

[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"]ココでは見出し(h2)として書いてるけど、もちろん(h3)や(h4)の時は、見出しタグに合わせてね[/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"]

ABOUT ME
のりこ
ライターのお役立ち情報、主婦に役立つ情報、キャリア、キャリアコンサルタントの情報を発信しています! お腹が減ると、ちょっと不機嫌になります!