テキストリンクの先頭に画像アイコンをつける方法

3 分で読めます。投稿から 7年。最終更新から 4年経過。
この記事の作成に約 37 分かかりました。

Youtubeのリンクを作る際に、それを目で見てもすぐ分かるようにアイコンの画像を表示したいと思いまし立ちました。
こういう風に、YouTube

普通なら、<img SRC=”画像URL”>というタグををつかうのですが、小さいアイコをいちいち記述するのも面倒だし、ソースも増えてしまいます。んで、こういう場合はスタイルシートを使うことになります。

調べたんですが、一般には背景画像やリスト、Hタグなどに画像を使う方法は解説されていても、テキストリンクにつける方法は見当たりませんでした。HTML5やCSS3などが普及しはじめるほどの時代ですから、基本的過ぎて実際はどうでもいい情報かもしれません。理屈的にはHタグの先頭に画像アイコンを入れる場合と変わりませんし。いちおう紹介しておきます。

スタイルシートに以下記述を追加 テキストの前にアイコンをつける方法

a.youtubelink {
background: url("アイコンのアドレス") center left no-repeat;
padding-left: 17px;
}

テキストの後ろにつける方法

a.youtubelink {
background: url("アイコンのアドレス") no-repeat right;
padding-right: 17px;
}

前か後ろか好みの方法を選んで記載してください。

そして、アイコンを表示したいリンクにクラス属性を追加します。

<a href="https://www.youtube.com/" class="youtubelink">YouTube</a>

とすればOKです。

ただ、この上のテキストの前にアイコンをつける方法はFireFoxでは問題ありませんが、下記のようにリンクが二行だとうまくいかない場合があります。
YouTube YouTubeYouTube YouTubeYouTube YouTubeYouTube YouTubeYouTube YouTubeYouTube YouTube
ブラウザがIEの少し古いバージョンの場合は複数行の中間にアイコンが表示されるのです。これはブラウザによるcenterの解釈の違いからおこるのですが、この現象がいやならテキストの後ろのつける方法にすればcenterを使わなくていいのでこの問題は回避できます。

20110117追記:
いちいち、手打ちでクラスを指定するのも面倒と思っていたら、WPにはLink Indicationという便利なプラグインがありました。このプラグインはリンクの指定したリンクの文字列が含まれる場合に、設定したクラスを自動でつけてくれます。なので、スタイルシートにそのクラスを追加すればOKという。自由度が高く便利なプラグインです。

スポンサーリンク
レクタングル大