リンクを貼る記述では、飛ばしたいページの URL で指定します。
では、ページ内で「ある箇所に飛ばしたい」場合ってないですか？
今回は、ページ内の中で飛ばしたい箇所があった場合の記述方法について解説していきます。
また、ボタンの装飾法についても触れていきます。
改善前と改善後
ページに飛ばす
内部リンクや外部リンクのように、他のページに飛ばす場合は以下の通りです。
<a href=" 飛ばしたいページの URL "> ～ </a>
ブログ活動をしている方なら、SEO対策でもよく言われるように、内部リンクを貼ったりすることはご存知かと思います。
では、ページ内の「ある特定の場所」に飛ばしたかったらどうしますか？
ページ内のある部分に飛ばす
『目次』って使っていますか？
この「はてなブログ」でも「Wordpress」でも、自動で、且つ簡単に目次を入れ込むことができます。
目次は、どんなことが書かれているかが一目でわかり、その中で見たい項目をクリックするとその記事の部分に飛んでくれます。
つまり、それが『ページ内の部分に飛ばす』ということです。
【手順１】飛びたい位置に名前を付ける
飛びたい位置に名前を付ける場合『 id 名』で指定します。
例えば、ある「 h5 見出しタグ」に飛びたい場合は以下のように指定します。
<h5 id=" 名前 "> ここが到着地点です </h5>
すると、このように表示されます。
ここが到着地点です。
（因みに、ここでは id="jump5" と指定しました。）
【手順２】ジャンプボタンを作る
ジャンプボタンは、前項のページに飛ばす方法と同じです。
<a href="# 飛ばしたい位置の id名 "> ～ </a>
手順１で指定した id名に『#』を付けるだけです。
つまり、手順１の id名 を使用すると、以下の記述になります。
<a href="#jump5">クリックして下さい！</a>
表示結果はこうなります。
（実際にクリックしてみてください！）
すごい簡単に出来たと思います。
他のページの飛ばしたい位置に飛ばす
次に、他のページのある部分に飛ばす方法について解説します。
飛ばしたいページには『 URL 』、飛ばしたい位置には『 id 』、
これは変わりませんから、記述は以下の通りです。
<a href=" URL # id名 "> ～ </a>
では、実際に記述してみます。
ただし、他のページに飛ばせないので「このページ」です。
<a href="https://www.newinfo.press/entry/button-link#jump5">ここをクリック！</a>
すると、下記のように表示されます。
別タブでページを開いて飛ばす
リンクを飛ばす時、新しいタブを開いてジャンプさせたければ、以下を追加記述しましょう。
target="_blank"
このように記述します。
<a href="https://www.newinfo.press/entry/button-link#jump5" target="_blank">ここをクリック！</a>
このように表示されます。
（実際にクリックしてみてください！）
【レベルUP】クリックボタンを作る
ちょっとおしゃれな『クリックボタン』をデザインしてみましょう。
気に入ってもらえたら、使ってみてください。（コピペ可能）
/* linkbutton のデザイン */
.linkbutton {
font-weight: bold; /* 太字 */
text-decoration: none; /* 下線消す */
background: skyblue; /* 背景色は水色 */
color: black; /* 文字は黒色 */
padding: 5px 10px; /* 余白指定 */
border-radius: 20px; /* 角丸め */
}
次に、クリックボタンにカーソルを当てた時に背景色を変えてみます。
/* カーソル当てたら */
.linkbutton:hover {
background: silver; /* 背景色を灰色 */
}
この CSS をコピペして、以下のように記述して使います。
<a class="linkbutton" href="https://www.newinfo.press/entry/button-link#jump5" target="_blank">ここをクリック！</a>
このように表示されます。
（実際にクリックしてみてください！）
いかがだったでしょう、役に立てましたでしょうか。
色も好みで変えてみると楽しいですよね。
ではまた、お会いしましょう。
