jsや各種プラグインを使わずCSSの記述のみで、別ウインドウで開くリンクにアイコンを表示する方法
別窓リンクを開くのに、「target」属性が指定されており、その値が「_blank」であるものに限定してアイコンを表示します。
以前から別窓を開くリンクの横にアイコンを表示したいと考えていたのですが、
JavaScriptや、WordPressで言うとプラグインなんかで可能だけど、できるだけjsやプラグインを使いたくないという考えが僕にありまして。。
で、cssで実現可能ということで、今さらながらに知ったセレクタなんですが、実装してみましたよ。
以下のようにスタイルシートを記述します。
a[target="_blank"] {
background: url(sample.gif) no-repeat right center;
padding-right: 18px;
}
アイコンの位置を左に変えたかったり、アイコンとテキスト等の隙間を変えたい場合は、色々いじってみてください。
ie6ではこのスタイルシートは効かないようなんですが、表示されなければされないでいいので、ie6は無視することにしましたw
当然ですが、htmlのaタグに「target=”_blank”」が記載されていないとスタイルシートは効かないので注意してください。
例えば、特定のクラスやIDの「target=”_blank”」のみにアイコンを表示したい場合は以下のよう記述すればOKです。
.sample a[target="_blank"] {
background: url(sample.gif) no-repeat right center;
padding-right: 18px;
}
#sample a[target="_blank"] {
background: url(sample.gif) no-repeat right center;
padding-right: 18px;
}
表示は以下のようになりますよ。リンクの右側にアイコンが表示されてますね。