【CSS】別窓マークを自動的に設置

今回はちょっとしたCSSでのユーザビリティー向上のテクニックです。

アンカータグ<a> に、target="_blank" をつけると自動的に別窓アイコンを設置するというものです。

疑似要素「::after」と疑似クラス「a[●●] 」を併用したテクニックになります。

とりあえず、HTMLとCSSを載せますね。

【HTML】

<h2>①target="_blank" なしのアンカータグ</h2>
<p><a href="～～URL～～">別窓アイコンなしリンク</a></p>

<h2>②target="_blank" ありのアンカータグ</h2>
<p><a href="～～URL～～" target="_blank">別窓アイコンありリンク</a></p>

<h2>③target="_blank" ありの .icon-right 指定アンカータグ</h2>
<p><a href="～～URL～～" class="icon-right" target="_blank">別窓アイコンあり.icon-right 指定リンク</a></p>

【CSS】

/* ■■■■ 【CSS】別窓マークを自動的に設置 ■■■■ */
a[target="_blank"]:after{
    content: "\002197";
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
    line-height: 1em;
    width: 1em;
    border: solid #333;
    border-width: 1px 2px 2px 1px;
    background: #fff;
    vertical-align: middle;
    margin: 0 0 0 5px;
    color: #000;
    border-radius: 3px;
}

a.icon-right {
    display: block;
    position: relative;
    background: #eef;
}
a.icon-right[target="_blank"]:after{
    content: "\002197";
    position: absolute;
    display: block;
    font-size: 12px;
    line-height: 0.95em;
    width: 0.95em;
    border: solid #333;
    border-width: 1px 2px 2px 1px;
    background: #fff;
    color: #000;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    overflow: hidden;
}

【ビジュアル（画像）】

【解説】

「content: "\002197";」は、斜め矢印「↗」です。

（機種依存文字なので、コードにしてます。）

あとは inline-block; にしてborder で囲んでしまえば、別窓っぽいマークの完成です。

これで、aリンクに「target="_blank"」が付けば、自動的に別窓マークがつくようになります。

こういったアイコンがつけば、リンクが別窓かどうかすぐにわかるので、

ユーザビリティーの向上にもつながると思います(｀･ω･´)ゞ

.icon-right 指定アンカータグでは、display:block でブロック化し、その右端に別窓アイコンを設置するというものです。

こちらはボタンデザインとかに応用できるような形ですね。

わかりやすいように、background:#eef; で背景色をつけております。

【まとめ】

アンカーリンクって、踏んでみないと別窓なのかそうでないのかの区別がつきづらいです。

なので、こうやって別窓マークを自動でつけてあげるとユーザー＆閲覧者にとってわかりやすいですし、ユーザビリティーの向上と言っても差し支えないと思います。

勝手に別窓移動するサイトって結構あって、あれ窓やタブがどんどん増えていくのがしんどいですよね(;^_^A

こういったちょっとした親切が、ストレスを生まないサイト回遊につながると思います。

ホームページ（ウェブサイト）・WordPressなどの様々なご相談、お待ちしておりますm(_ _)m