[CSS3] 属性セレクタを使って外部リンクにのみアイコンを表示する方法

[CSS3] 属性セレクタを使って外部リンクにのみアイコンを表示する方法

CSS3で追加された属性セレクタの正規表現的な機能(IE8以上対応です)を使って、外部リンクにのみアイコンを自動的に表示するということをこのブログでやってみました。しかし実際やってみると、思った通りの表示にならなかったり…。最後は少しjQueryの力を借りてしまいました。

内部リンクをすべて相対パスで指定している場合

内部リンクをすべて相対パスで指定している場合は外部リンクの判断は簡単で、hrefの値の始まりが “http” で始まっていればそれが外部リンクですね。属性セレクタで以下のように指定します。

a[href^="http"]

これで指定したセレクタに :after 要素でアイコンを表示します。(アイコンの表示には Font Awesome を使っている為、content で挿入しているのは Font Awesome のアイコンのコードです。)

a[href^="http"]:after{
  content: "\f0c1";
}

こんな表示になります。(HTML を含む全てのコードはタブで切り替えて確認できます。)

See the Pen hcfLm by Saomocari (@Saomocari) on CodePen.

リンクをすべて絶対パスで指定している場合

今回のように WordPress だとリンクは内部リンクもすべて絶対パスになっています。絶対パスの場合は少し工夫が必要です。

:not() セレクタで外部リンクを判断する(IE9以上)

IE9以上の対応でよい場合は :not() セレクタを使うのが簡単です。:not() セレクタ は E:not( value ) という形で使います。value を含まない E 要素を指定できます。

自分のドメイン以外にという指定になるので以下のような指定になります。

a:not( [href^="http://orientalpage.heteml.net/memocarilog"] )

アイコンを表示するには以下のようなCSSにします。

a:not( [href^="http://orientalpage.heteml.net/memocarilog"] ):after{
  content: "\f0c1";
}

See the Pen :not() セレクタで外部リンクを判断する by Saomocari (@Saomocari) on CodePen.

:not() セレクタを使わずに外部リンクを判断する

:not() セレクタを使わない場合、まずは http で始まるリンク全てにアイコン表示するようにします。

a[href^="http"]:after{
  content: "\f0c1";
}

次に、自分のドメインが含まれるリンクには content を表示しない指定をします。

a[href*="memocarilog.info"]:after{
  content:none;
}

これで外部リンクにだけアイコンが表示されました。

See the Pen :not() セレクタを使わずに外部リンクを判断する by Saomocari (@Saomocari) on CodePen.

外部リンクしているのが画像の場合

ここまでの指定方法だけでは、画像に外部リンクが貼ってある場合でも以下のようにアイコンが表示されてしまいます。

See the Pen リンク先が画像の場合でも以下のように画像の後にリンクが表示されてしまいます。 by Saomocari (@Saomocari) on CodePen.

アイコンを表示したいのは文字リンクのみだったので少し困りました…。

:not() は子要素には効き目がないようで、img を子要素にもつ a 要素みたいな指定はできません。そこでここは jQuery に助けてもらうことにします。

以下のコードで、img を子要素にもつ a 要素には no_icon というクラスを付けます。(#main は親要素を指定します)

$(function() {
	$('#main').find('img').parent('a').addClass('no_icon');
})

そして、no_icon クラスがついているものは content 表示をなしにします。

a.no_icon:after{
  content:none;
}

これで、テキストリンクの外部リンクのみにアイコン表示ができました!

See the Pen 外部リンクしているのが画像の場合 by Saomocari (@Saomocari) on CodePen.

本当はすべて CSS のみで行いたかったのですが、〜の親要素に指定ができるセレクタ指定が思いつきませんでした…残念です。:not() セレクタの今後に期待したいと思います。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能