こんにちは、ゾノ（@zono21）です。
他のブログを見ていると、外部リンクにアイコンがついているのありますよね？
リンクの前についている、こんなやつです。
これを自分のサイトでも入れてみたので、試してみます。
【前提】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;
}簡単に解説しますと、
.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派ですが、辞書的に使うのは、どうしても紙の本の方がまだ便利ですね。
