「新しいウィンドウ（というよりタブ）を開く」ことが分かるようにするため、アイコンが追加されるようにしてみました（実例は右）けど一通り満足したので戻しました（笑）。アイコンはFontAwesomeというフォントを使用しています。この導入にちょっと手こずりました。戸惑ったのは以下の2点。
- FontAwesomeのバージョンアップにともない、font-familyが"FontAwesome"から"Font Awesome 5 Free"になっていたこと。
- FontAwesomeの数種類のスタイルのうち、使用したいものに応じて個別のfont-weightを指定する必要があること。
font-weight: 900; /* Solid */ font-weight: 400; /* Regular or Brands */ font-weight: 300; /* Light */
そのほか、FontAwesomeのサイトからユニコードを直接コピペする場合は、先頭に"\"を追加しないと表示されません。そもそもタグで呼び出した方がトラブルは少ないのだけど、擬似クラスを使って表示させたかったので公式の解説を参照しました CSS Pseudo-Elements | Font Awesome。
はてなブログ内でよそのサイトへのリンクに勝手にtarget="_blank"を指定してくれるようにする方法はこちら。JQueryでやってくれます。
リンク先を別ウィンドウで開く
markdown記法でリンクをtarget="_blank"にする - エンジニアをリングする
リンク先の方々に感謝します。
ただ、そもそも論として、リンクを新しいタブで開く指定が必要なのかという疑問はあります。「あらかじめ新しいウィンドウ（タブ）で開くようにしておくよりも、新しいウィンドウ（タブ）で開きたい人が自由に選べる方がユーザビリティ上望ましいのでは？」とも思うのです（教えてえらい人）。私は昔、「よそのサイトは新しいウィンドウ！」と思っていたのですが、いつの間にかそうでもなくなっていたんですね。といいつつも導入してみたのは、やってみたかったからです（笑）
