閉じる
閉じる

あまめも

サイトでリンク箇所に分かりやすくアイコを追加する方法【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. [WordPress]「外部サイトのリンクをアイキャッチ込で分か…

  2. [甘]とりあえず、グローバルメニューの作成完了?

  3. ブログデータをローカルに移す方法を良く忘れるのでメモしとこ〜っ

  4. 【基礎】MySQLのデータ型まとめ

  5. Gitを使用してると「このファイルは管理しないんだけど・・・」っ…

  6. MarkdownのHタグにクラスを追加する簡単な方法

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

  1. 十五夜看板

Twitter

ページ上部へ戻る