記事中で自分のサイトではない外部サイトへのリンクを書くときに、それが「外部サイトへのリンクだよ」というのを分かりやすくするために、リンクテキストの後ろにアイコンを付けてみます。
まえがき
普通のブラウザで、cssなど何も手を加えていない場合、リンク（aタグ）部分はたいていは「青字に下線」で表現されます。ただ、わりと早い段階からリンクの色を変えるというのはよく見られたもので、そこは気にしなかったのですが、「下線付きのテキストはリンク」というのは古くからのネット民には共通認識としてあったものでした。
ただ、現在はスマホ全盛時代。ネットはスマホからしかやったことないよ、という人も増えていると思います。で、スマホサイトでは実際に画面を押せるということからなのか、テキストだけだと反応範囲が狭いからか、「テキストよりもボタンでリンクを表現」をいうのが増えてきました。そもそも文中でテキストでリンクすることが減った？
なので、今の若い人たちには「青字に下線はリンク」というのは認識されないかもな？と思ってTwitterでアンケートしてみました。
【アンケート】ウェブ上でテキストに下線はリンクに見える？強調に見える？
— orefolderの中の人 (@orefolder) 2018年3月20日
微妙な…。
まぁ、そんなことはさておき、まだスマホが普及する前、「リンクテキストの後ろ（もしくは前）にアイコンを付ける、リンクされているファイルの種類によってアイコンを変更する」というのがあって、ちょっと流行ったんですね。少なくとも私の中では。
その当時は実際に画像ファイルを使っていたんですけど、いまはcssの::afterとかアイコンフォント使えばもっと楽にできるんじゃない？と思ったのでやってみました。
ただ、はてなブログでpdfへのリンクとかdocファイルへのリンクがあるって、あまり無いと思うので省略して、「外部リンクだけはわかりやすくアイコン付ける」というのをやってみようと思います。
サンプル
css
.entry-content a:not([href*="自分のサイトのドメイン"])::after{ content: '\f009'; font-family:blogicon; }
「自分のサイトのドメイン」という部分には、独自ドメイン使っている人はそのドメイン（foxism.jpとか）を入れてください。そうじゃない人ははサブドメイン含めたの（zeno-teal.hatenablog.comとか）を入れてください。
ちょっと解説すると、[href*="自分のサイトのドメイン"]というのは、「href」に「自分のサイトのドメイン」を含むもの、という指定です。で、その前の:not()はカッコ内の指定に「当てはまらないもの」を指定します。つまり、a:not([href*="自分のサイトのドメイン"])はaタグのhrefに自分のサイトのドメインを含まないもの、ということになります。
サンプル2
ところが、上の方法だと目次のような#で始まってドメインを含まないリンクにもアイコンが付いちゃうんですね。ほら。
これを何とかするためには、以下のcssを加えます。
.entry-content a[href^="#"]::after{ content:''; }
[href^="#"]というのは、「hrefが#で始まるもの」という意味です。これでcontentの中身を「何もなし」に上書きしています。
なので、2つのcssを合わせると以下のようになります。
.entry-content a:not([href*="自分のサイトのドメイン"])::after{ content: '\f009'; font-family:blogicon; } .entry-content a[href^="#"]::after{ content:''; }
先に設定して後から打ち消すっていうのはなんだか美しくない気がするんですが、ほかに思いつきませんでした。もっといい方法もあるかもしれません。
ちなみに、同じ内部リンクでも相対パスでのものがありますが、これはブログで使う人はまぁいないだろうということで省略です。使う人は#のときと同じように打ち消せばいいんじゃないでしょうか。
あと、もっと考えていくとメーラー起動のリンクはメールアイコンにしたい、何ていうのを考えるともっと複雑…ではなくても記述は増えていきますね。これ以上考えるのは面倒だからやらないですけど。
まとめ
これで、文中でいきなり他サイトへのリンクがあっても、外部サイトへのリンクだってわかりやすくなりますね。
ちなみにブログカードだとこうなります。
属性セレクタって面白いですね。
