サイトでリンク箇所に分かりやすくアイコを追加する方法【css】

こんにちは! あますた(@amaguristar)です。
- 「サイトでリンクの場所を分かりやすくするためにアイコン表示させたい!」
そんな時ありませんか? cssで簡単に設定できますよ。
導入方法
- リンク用のアイコンを用意する。
- cssを編集
の2工程。
1. リンク用のアイコンを用意する
まずはアイコンを用意しないと何も始まらないので準備。
当然自分で書いても良いですし。フリーのアイコンをダウンロードしても良いです。
今回は下記サイトからフリーの画像をダウンロードして使用します。
上記サイトからダウンロードした素材が、

これをリンク箇所に分かりやすく表示させようと思います。
2. cssを編集
a{
border-bottom: 1px dotted #1396c0;
text-decoration: none;
}
a::after{
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-image: url(画像の置いてあるurl);
background-size: contain;
vertical-align: middle;
}
上記cssを適用すると、
この様にリンクの最後に自動的にリンク画像を表示します。
※
単純に<a>タグだけだと全てのリンクにアイコンが表示されるので、クラスを設定することをおすすめします。
一番簡単な設定は
自分は文字のサイズによってリンクアイコンのサイズを変える設定にしてますが、単純に表示させるだけだと下記のcssで十分です。
a{
border-bottom: 1px dotted #1396c0;
text-decoration: none;
}
a::after{
content: url(https://tsuredure.info/icon/icon-link16x16.png);
margin-right: 5px;
}
上記cssを適用すると
この様に表示されます。
ちなみに、上記アイコンのサイズは16×16です。
まとめ
リンクだと分かるようにアイコンを表示するにはcssを編集。
一番簡単なのは、
a{
border-bottom: 1px dotted #1396c0;
text-decoration: none;
}
a::after{
content: url(https://tsuredure.info/icon/icon-link16x16.png);
margin-right: 5px;
}
文字のサイズに合わせて表示させるには、
a{
border-bottom: 1px dotted #1396c0;
text-decoration: none;
}
a::after{
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-image: url(画像の置いてあるurl);
background-size: contain;
vertical-align: middle;
}
ちなみにリンク先がファイルで、拡張子に合わせて表示させるアイコンを変えたいと言う時は下記リンクを参照。