大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

【HTML・CSS】ページ内で飛ばす!初心者向け「飛ぶリンク」「ジャンプボタン」の装飾カスタマイズ法

リンクを貼る記述では、飛ばしたいページの URL で指定します。

では、ページ内で「ある箇所に飛ばしたい」場合ってないですか?

今回は、ページ内の中で飛ばしたい箇所があった場合の記述方法について解説していきます。

また、ボタンの装飾法についても触れていきます。

f:id:success-life:20220216183044j:plain

リンク【HTML・CSS】

改善前と改善後

f:id:success-life:20220218144539p:plain

《 改善前 》

 

f:id:success-life:20220218145350p:plain

《 改善後 》

 

ページに飛ばす

内部リンクや外部リンクのように、他のページに飛ばす場合は以下の通りです。

<a href=" 飛ばしたいページの URL "> ~ </a>

ブログ活動をしている方なら、SEO対策でもよく言われるように、内部リンクを貼ったりすることはご存知かと思います。

では、ページ内の「ある特定の場所」に飛ばしたかったらどうしますか?

 

ページ内のある部分に飛ばす

『目次』って使っていますか?

この「はてなブログ」でも「Wordpress」でも、自動で、且つ簡単に目次を入れ込むことができます。

目次は、どんなことが書かれているかが一目でわかり、その中で見たい項目をクリックするとその記事の部分に飛んでくれます。

つまり、それがページ内の部分に飛ばすということです。

 

【手順1】飛びたい位置に名前を付ける

飛びたい位置に名前を付ける場合『 id 名』で指定します。

例えば、ある「 h5 見出しタグ」に飛びたい場合は以下のように指定します。

<h5 id=" 名前 "> ここが到着地点です </h5>

すると、このように表示されます。

ここが到着地点です。

  (因みに、ここでは id="jump5" と指定しました。)

 

【手順2】ジャンプボタンを作る

ジャンプボタンは、前項のページに飛ばす方法と同じです。

<a href="# 飛ばしたい位置の id名 "> ~ </a>

手順1で指定した id名に『#』を付けるだけです。

つまり、手順1の 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>

このように表示されます。

ここをクリック!

  (実際にクリックしてみてください!)

 

いかがだったでしょう、役に立てましたでしょうか。

色も好みで変えてみると楽しいですよね。

 

 

www.newinfo.press

 

www.newinfo.press

 

www.newinfo.press

 

ではまた、お会いしましょう。

 

  参考になった!  参考にならない