PR

【スクロールリンク】1分でできる同ページの指定位置にジャンプするジャンプリンクのつけ方【ジャンプリンク】

AD
疑問や不具合の解決

 サイトを作るにあたって、同ページ内の指定位置にジャンプできるジャンプタグの付け方を書き留めます。

同ページにジャンプするリンク付けタグはページ内スクロールとも呼ばれ、読みたいところにすぐに飛ぶことが出来るのでサイトを読んで下さる方がかなり見やすくなります。

読みやすいサイトは検索にも表示されやすくなるので、嬉しいことだらけです。ただ、別サイトに飛ぶリンク付けは埋め込んだり、サイトに付けるだけで良いのですがこちらはそうはいかないのです。

 ということで、今回は初めてでも簡単に分かるように実際のタグを使いつつ説明します!

実際のタグとその作り方

 まずは実際にページ内ジャンプリンクをここに置きます。

押してみて下さい!

ここから飛べます

おかえりなさい!

と、こんな感じで同ページ内をスムーズに移動できるのです。これにはクリックで移動する場所とその移動先の2つを作ってあげることが必要です。

 作るにはhtmlタグ付けというものを行う必要があります。簡単に言えば、サイト内にいろいろな効果を付け加えることが出来るやつです。それではその付け方をお教えします。

まず、こちらのタグはここから移動できるようになるものです。

[html]<a href="#1">ここから移動</a>[/html]

そしてこちらのタグが移動先を指定するものです。

[html]<a name="1">到着地点</a>[/html]

皆さんがいつも書いているサイトの文章内に入れてみて下さい。これだけで、ジャンプ移動は可能です。

ここで、タグ内容について説明します。

 まずは、” “ で囲まれている部分です。これは双方のリンクを紐づけているもので、例えば #1→1のように同様のリンクにすることで繋がりができてジャンプ出来るようになっているのです。

これは同じ名前のリンクが複数あると当然エラーが起きるので、被らないように二つ目は #2→2 にするなど分ける必要があります。見返した時に自分が分かりやすいように、 #mokuji→mokuji や#setumei→setumei などの言葉で分ける人も多くいますね。

そして、 > < で囲まれている部分(「ここから移動」や「到着地点」)が実際に表示される文字となります。ここはご自由に変えてもらって大丈夫です。先ほど私が例としてお見せした「押してみて下さい!」や「到着です!」等もここに入れることによって表示されていたのです。

到着です!

ここからさっきの場所まで戻れます!

コメント

タイトルとURLをコピーしました