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

0
【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>内のユーザー定義] を使うことにします。

ここですね。

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

Default
1
2
3
4
5
6
7
8
<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にはバックスラッシュ(\)を先頭に置いてください。

Default
1
2
3
4
5
/* これはだめ。 */
content: "f08e";
 
/* こうすること！ */
content: "\f08e";

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

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

こんな感じですね。

Default
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>

さいごに。

アイコンフォントは画像を用意する必要がなく容量を気にせず使えるのが魅力です。
アイコンフォントにはInstagramやYouTubeなどのブランドアイコンもあり多用途に使えます。まだの人はぜひ導入してみてくださいー。

コメント

*



この記事も読まれています