【WordPress】target=”_blank”で外部リンクを開くリンクのみにアイコンを付ける方法

何日か前からWordPressを使い出してブログテーマのCOLORSのカスタマイズに夢中なんですが、ブログによくある「別ウインドウで開きますよー」って分かるこんなリンクを付けてみようと思います。

アイコンはFont Awesomeを利用する。

CSSでアイコンフォントが使えるサービス、Font Awesomeを使ってやってみようと思います。

Font AwesomeはWebフォントでアイコンが使える画期的なサービスですよ。

fontawesome.io

Font Awesome, the iconic font and CSS toolkit

http://fontawesome.io

Font Awesome, the iconic font and CSS framework

CSSはHTMLヘッダーを利用する。

Font AwesomeはCDNで@インポートを使って読み込むので、カスタムスタイルシートに書いても反映しません。

これはマジにご注意ください。

そしてheader.phpとかに直書きしても良いですが、今回は [DigiPress] → [詳細設定] → [HTMLヘッダー設定] の中の [<head>～</head>内のユーザー定義] を使うことにします。

ここですね。

ここに下記のコードを入れて完了です。

<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.entry p a[target="_blank"]:after {
	content: "\f08e";
	font-family: "FontAwesome";
}
</style>

<style>

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.entry p a[target="_blank"]:after {

content: "\f08e";

font-family: "FontAwesome";

}

</style>

本当にこれだけです。

適当な解説。

Font Awesomeは見た目はアイコンですけど実体はフォントなので、font-familyで指定してあげないと表示されません。
また、contentにはバックスラッシュ(\)を先頭に置いてください。

/* これはだめ。 */
content: "f08e";

/* こうすること！ */
content: "\f08e";

/* これはだめ。 */

content: "f08e";

/* こうすること！ */

content: "\f08e";

この場合は記事外の外部リンク全てにアイコンが付いちゃうので、記事内だけに反映するように.entryのクラスの中にあるtarget=”_blank”だけに使えるように設定しています。

そしてWordPressじゃない場合は外部の.cssに書くか、下記のようにするだけで同じようにアイコンフォントが使えます。

こんな感じですね。

<!doctype html>
<html>
<head>
<meta charset="utf-8">

	<style>
	@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

	a[target="_blank"]:after {
		content: "\f08e";
		font-family: "FontAwesome";
	}
	</style>

<title>タイトル</title>
</head>

<body>
</body>
</html>