WordPress

WordPressで外部リンクの後ろにアイコンをつける方法がとっても簡単だった

オンライン将棋教室 香 Webページ
こんな風に外部リンクの後ろにアイコンをつけたくなって、調べてみたら簡単にできました。

 

やり方は？

まず、私のサイトは外部へのリンクにすべて「target="_blank"」がついています。
ですので、これに対してアイコンをつけるコードを書きます。

 

どこに書くの？

CSSに書きます。
書く場所の候補は2つあって、

  1. 「style.css」に書く
  2. 「追加CSS」に書く

です。
1.の「style.css」に書く場合は、「ダッシュボード」→「外観」→「テーマエディター」から編集可能です。
2.の「追加CSS」は「ダッシュボード」→「外観」→「カスタマイズ」にあります。

1.を選ぶとテーマエディターに「ここで CSS を変更する必要はありません」と書かれていて、2.の「追加CSS」に行くリンクがあります。
知識のある方は1.を、とりあえずアイコンがつけば良いという方は2.を選ぶと良いでしょう。

 

どのように書くの？

こんな風に書きました。

/* 外部リンクにアイコンをつける */
a[target="_blank"]:after{
	content: "\f08e";
	font-family: FontAwesome;
	margin: 0px 3px;
}

ざっくり説明すると、target="_blank"がついているaタグの後ろに、コンテンツを設定して、というコードです。
アイコンはFont Awesomeを使っています。
デフォルトだとアイコンがくっつきすぎに感じたので、3pxほどスペースを開けています。

 

うまくいかない時は？

実は、私の使っているWordPressテーマには標準で「Font Awesome」が使えるものです。
もし、コードを入力してみて上手くいかない場合は、テーマが対応していない可能性があります。
その場合は、こちらのサイトが詳しかったので、参考にしてみてください。
WordPressにFont Awesomeを導入する方法と使い方

 

まとめ

CSSにコードを書くだけで、解決します。
最初は外部リンクをひとつひとつ修正しなければいけないのかなと思っていたので、こんなに早く終わってびっくりしました。

-WordPress
-, , , ,