別タブ（新規ウィンドウ）でリンクを開く、target属性に_blankの属性値をもつaタグは、自分のサイトではない外部リンクを貼るときによく使われています。
ただ強制的に別タブで開くのはアクセシビリティ的に良くないとも言われています。
リンク先を別ウィンドウ（タブ）で表示させることはアクセシビリティ上どうなのか。
目次
CSSでカスタマイズ
そこで「このリンクは外部リンクですよ〜、別タブで開きますよ〜」ということを明示的にわかるように外部リンクの後ろにアイコンを付けるカスタマイズをしてみました。このブログで導入しています。
Yahoo! Japan（外部リンク）
style.css
/* 外部リンクアイコン付き */
.entry-content a[] {
text-decoration:none!important;
border-bottom:1px solid #4f96f6;
}
.entry-content a[]::after {
content: "\f35d";
font-family: "Font Awesome 5 Free";
margin-left: 5px;
}
MEMO
アイコンはFontAwesome 5を使っています。導入されていないテーマをお使いの方は以下のコードをheader.phpの＜/head＞の直前に挿入して下さい。<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">FontAwesome 4.7を使用される方は以下のCSSとなります。
style.css
/* 外部リンクアイコン付き */
.entry-content a[] {
text-decoration:none!important;
border-bottom:1px solid #4f96f6;
}
.entry-content a[]::after {
content: "\f08e";
font-family: FontAwesome;
margin-left: 5px;
}こんな方におすすめ
- リンクにアイコンを付けたいけれど一々記事にCSSクラスを追加するのは面倒だ
- 外部リンクは別タブで開くことを明示したい
- 内部リンクと外部リンクはデザインで区別したい
このカスタマイズはWordPress他、はてなブログでもこのCSSをそのまま使えます。ちょっとしたカスタマイズですが、お気に召しましたら是非やってみてください。
追記：画像リンクへの対応
上記のCSSだけだと、画像リンクにが設定されていた場合も後ろにアイコンが付いてしまうことに気付きました。（遅いです）
そこで以下のコードを子テーマのfunctions.phpへ追記します。(functions.phpの追記する場所は注意してください。）
fuctions.php
function remove_icon() {
echo <<< EOM
<script>
//外部リンクの画像後ろのアイコンを消す
jQuery(function($){
$("a:has(img)").addClass("remove-icon");
});
</script>
EOM;
}
add_action( 'wp_footer', 'remove_icon' );
jQueryで画像リンクのaタグには特定のclassを付与しています。
body の一番下に JavaScript コードを挿入するやり方はzzさんのブログを参考にしました。
はてなブログの場合はjQueryの読み込みの後にscriptだけ入れてください。
次のCSSをstyle.cssに追記して下さい。
コード
/* 画像リンクのアイコンを消す */
.entry-content a.remove-icon[] {
border:none;
}
.entry-content a.remove-icon[]::after {
content: none;
}
これで画像リンクの場合は別タブで開く設定にしていてもアイコンが付きません。