外部リンクの_blankをCSSでスタイル指定とアイコン表示をしてみよう

2017/03/27


リンクを別タブで開かれるようにする時には、aタグにtarget=”_blank”を追記しますよね。
そして、外部リンクの時にはアイコンなどをつけて「これは新しいタブを開きますよ」と分かるようなデザインが必要な時もあると思います。

今回は、そんな時にCSSで外部リンクと内部リンクのデザインを変える方法を書いていきます!

CSSでtarget=”_blank”だけにスタイル指定する

特定のものにスタイルを与える方法としてclassを利用するという方法もありますが、今回の場合はCSSのセレクタに少し追記するだけで解決できちゃいます。

a[target="_blank"]{
	color: #ccc;
}

はい!これだけです!
これで外部リンクにだけcolor: #cccが適応されます。簡単ですね!

See the Pen target=”_blank”テスト by madka (@madka) on CodePen.0


実際にコードを書いて試して見るとこんな感じになります。

CSSでtarget=”_blank”だけアイコンフォントをつける

外部リンクにだけ擬似要素をつかってアイコンをつけることで分かりやすくすることもできます。

See the Pen taget=”_blank”テスト2 by madka (@madka) on CodePen.0


こんな感じで、a[target=”_blank”]に::beforeをつけてアイコンフォントなどを指定してあげるとリンクの前にCSSだけでアイコンをつけることができます。

アイコンを画像にするときは、擬似要素にbackgroundで背景画像として設定してあげることで表示できます。

この方法なら、わざわざスタイルを変更するのにclassをつかうこともなく、アイコンをつけるのにaタグの前にimgタグで画像をおいたりせずCSSだけで完結できるので、活用していくと変更がでた場合にも編集が楽になると思います!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend