【WordPress】外部リンクにアイコンを追加する方法

こんにちは、ゾノ(@zono21)です。

他のブログを見ていると、外部リンクにアイコンがついているのありますよね?

リンクの前についている、こんなやつです。

https://www.yahoo.co.jp/

これを自分のサイトでも入れてみたので、試してみます。

スポンサーリンク

スポンサーリンク

【前提】Font Awesomeが必要です。

アイコンを追加するには、「Font Awesome」と呼ばれる、アイコンセットを導入しておく必要があります。

うちのブログテーマは、【SANGO】で自動的に入っていましたね。

もしあなたのブログテーマに入っていない場合、手動で追加する必要があります。

手動で追加する方法は、こちらのサイトが参考になります。

WordPressにFont Awesomeを導入する方法と使い方
https://affilabo.com/wordpress/15280/

FontAwesome
https://fontawesome.com/

スポンサーリンク

style.cssにこれを追加します

コード

.entry-content a[target="_blank"]:not([href^="https://zono21.xyz"]):not([class="amazonjs_link"]):not([href$=".jpg"]):not([href$=".png"]):not([href$=".gif"])::before{
margin-right: 3px;
content: "\f08e";
font-family: FontAwesome;
display: inline-block;
vertical-align: -1px;
}
MEMO
“https://zono21.xyz”の部分を自サイトに置き換えてください。

簡単に解説しますと、

.entry-content a[target=”_blank”]

→記事内かつ外部Windowで開くリンクのみ

 

:not([href^=”https://zono21.xyz”])
→自サイトの内部リンクは除く。

 

:not([class=”amazonjs_link”])
→当ブログでは、プラグイン”AmazonJS”というのを使っています。そのプラグインが生成するアマゾンリンクにこのclassがついていますので、それは除く。

 

:not([href$=”.jpg”]):not([href$=”.png”]):not([href$=”.gif”])
→画像リンクは除く

たぶんこれで、ほとんどの方が適用できるのではないでしょうか。

他、なにか自動生成でリンク作っているものがあれば、
:not([class=”amazonjs_link”])
みたいに、除く設定をしてあげれば良いです。

まとめ

上記のようなCSSは、机の横にこれを置いて調べています。
基本は、kindle派ですが、辞書的に使うのは、どうしても紙の本の方がまだ便利ですね。