cssで新窓表示_blankの時だけアイコンをつける
よくある、「リンクを新しい窓（タブ）で開く」の横にある、
のようなアイコンをcssで表示させる方法。
Font Awesome 5 使用。（フリー版）
覚書きシリーズ。
事前準備
今回のアイコンはFontAwesome5を使用するので、<head>~</head>の中にFontAwesome5のCDNを読み込ませておきます。
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
FontAwesomeのサイトはこちら fontawesome.com
はてなブログで使えるiconを使う方は特に必要ないです。
はてなブログデフォルトのアイコンだと、こんな感じのアイコンになります▼
a[target="_blank"]でアイコンフォント表示
あとはcssのファイルに記述していきます。
とりあえず記事内だけで表示されると想定してクラス指定。
アイコンはFontAwesome使う場合と、はてなブログデフォルトのアイコンを使う場合を想定して2種類紹介してます。
お好きな方を選んで記述ください。
FontAwesome 5のフォントアイコンを使用する場合
.entry-content a[target="_blank"]::after{ content: "\f35d"; font-family: "Font Awesome 5 Free"; font-weight: bold; /*指定しないと表示されない*/ padding-left: .3em; /*文字とアイコンの間に隙間*/ }
フォントアイコンが表示されない時は？
私はよくfont-familyの""を入れ忘れて表示されなくて「なんで？」となることが多かったです。同じような方いれば""で括ってるかどうか確認してみてください。
こちらのサイト様で表示されない時の解決法が確認できます wk-partners.co.jp
逆に、はてなブログのデフォルトのフォントアイコンを使うときはfont-familyの""は必要ないので、気をつけましょう。
はてなブログデフォルトのフォントアイコンを使用する場合
はてなブログデフォルトのアイコンの場合は、
.entry-content a[target="_blank"]::after{ content: "f009"; font-family: blogicon; padding-left: .3em; /*文字とアイコンの間に隙間*/ }
と、contentとfont-familyを変更。
はてなブログデフォルトのアイコン一覧は以下サイト様で確認できます。
確認
ちゃんと表示されてたらOK!
解説
a[target="_blank"]で、<a href="https://www.~~.com" target="_blank">別窓リンク</a>の時だけアイコンが表示されるように設定。
.entry-contentははてなブログでの記事内のクラス名なので、他のブログの場合はクラス名を調べて付け直す必要あり。
つけなかったらサイドバーやヘッダー・フッターなど、ほかの場所での新窓表示すべてにアイコンがついて鬱陶しいので、記事内くらいに留めておくのがよいかと。 （サイドバーのリンクとかはついていてもいいかもしれない）
テーマ制作で役立てよう！
アイコンフォントをつけ、視覚的にわかりやすいサイトづくりをめざしましょ〜〜（＾０＾）／
