閉じる
閉じる

あまめも

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

リンク

こんにちは! あますた(@amaguristar)です。

  • 「サイトでリンクの場所を分かりやすくするためにアイコン表示させたい!」

そんな時ありませんか? cssで簡単に設定できますよ。

 

導入方法

  1. リンク用のアイコンを用意する。
  2. cssを編集

の2工程。

1. リンク用のアイコンを用意する

まずはアイコンを用意しないと何も始まらないので準備。

当然自分で書いても良いですし。フリーのアイコンをダウンロードしても良いです。

今回は下記サイトからフリーの画像をダウンロードして使用します。

>> Icon-rainbow

上記サイトからダウンロードした素材が、

link
link

これをリンク箇所に分かりやすく表示させようと思います。

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;
}

ちなみにリンク先がファイルで、拡張子に合わせて表示させるアイコンを変えたいと言う時は下記リンクを参照。

>> HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

関連記事

  1. take067-thumbnail

    【WaznFilm更新】新感覚陣取りゲーム「Potlatch K…

  2. 09152021-thumbnail

    phpで日本語urlをエンコードorデコードする簡単な方法

  3. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  4. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

  5. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  6. まとめ

    「Git」の履歴が見づらいのでまとめたい、そんな時の修正方法

こんなメモもありますよ♪

  1. 決済端末

Twitter

ページ上部へ戻る