【いまスニ】外部リンクアイコンをCSSだけで一括設置※デモあり※

「いまスニ」とはいまさら感漂うスニペット集をまとめる記事です。
第四回としては、外部リンクアイコンのカンタン設置方法をご紹介していきます。

外部サイトに飛ばすリンクの場合は「この先は外部サイトですよ～」とわかりやすくアイコンを付けた方が良いですよね？
いちいちHTML上にimgタグでアイコンを何度も何度も仕込むことなく、CSSだけで簡単にアイコンを設置していきましょう。
百聞は一見に如かず！ということで、早速コードをご紹介。

外部リンクアイコンをCSSだけで一括設置する

See the Pen 外部リンクアイコンをCSSだけで設置する by piroshiki339 (@piroshiki339) on CodePen.

ソース内にもコメントしてありますが、簡単に説明すると

1. httpから始まるリンクはアイコンが付きます
2. targetが_blankになっているとアイコンが付きます
3. classにexlinkが入っているとアイコンが付きます
4. 1か2の場合、classにnotexが入っているとアイコンが付きません

番外：httpから始まるリンクはtargetを_blankにするJS

外部リンクにはアイコンを付けるだけでなく、_blank設定も一緒にしたい場合がありますよね。
そんな欲張りさんに、以下のJSを使ってカンタンに実装することができます。

See the Pen BvYMVw by piroshiki339 (@piroshiki339) on CodePen.

※上記の書き方はjQueryが必要です。

まとめ

いかがでしたか？
JSで制御しているサイトもよく見かけますが、CSSのパターンをいくつか作ることで、カンタンに同じことが実現できます。
基本はこのCSSパターンを応用すれば、どんな時でも対処できるかと思いますので、是非いろんなパターンを試してみてください。

関連記事はこちら

【いまスニ】画像をブラウザサイズによって出し分ける！※デモあり※ 【いまスニ】いまさら感漂うスニペット集 簡単スムーズスクロールのアレンジ※デモあり※ 【いまスニ】viewportの設定を端末毎に出し分ける！※デモあり※ 【TortoiseGit】コマンド不要でGit管理②-スタッシュ-