2013年11月24日

新規ウィンドウ(新規タブ)で開くアンカーテキストには印を付けたらイイよ

new-window-250

こんにちは! WEB制作歴も長いブロガーのヨス(@yossense)です!

うん。今思ったけど、WEBの仕事をしているのに、WEBの記事ってあんまり書いていないですね。いろいろ書きたいことはあるのでちょっとずつアウトプットしていこうと思っています!

では今回は、 他のサイトを見ているときにときどき思う、アンカーテキスト(リンクテキスト)のお話です。

「新規ウィンドウ」で開くときは分かるように

念のため、最初に説明しておくと、アンカーテキストとは、こういうやつのことです。

ヨッセンスのトップページはコチラです。

上の例で言うと「トップページはコチラ」という部分がアンカーテキストです。文字で、クリックすると別のページに移動するヤツをアンカーテキスト(リンクテキスト)と言います。

新規ウィンドウで開くときは印をつけて欲しい

そのアンカーテキストをクリックしたときに、新規タブ(新規ウィンドウ)で開くことがあります。てっきり同じタブで開くと思っていたらビックリします。ほら、下のアンカーテキストをクリックしてみて下さい!!

ヨッセンスのトップページはコチラです。

ね、新しいウィンドウで開きましたよね? 不意打ちちっくで、なんかウザくないですか?! そんなときに「これは新規タブで開きますぞ!!」と分かる印があればよくわかりますよね。というか「お、新規で開くんやな」と身構えることができます。

なので私の場合、このブログでは、こんな画像が出るようになっています追記: 画像からアイコンフォントに変更しました。

ヨッセンスのトップページはコチラです。

マークはいろいろあると思いますが、こんなマークがあると分かりやすいですよね。

ソースを紹介

私の場合は、擬似要素「afterを使って、アンカーテキストの後ろにこのマーク(画像)が出るようにしています。別に画像じゃなくてアイコンフォントでも問題ありません。ってかサイトスピードで言うと、むしろその方がいいですね。

1html

<a href="http://yossense.com/" target="_blank" class="exit">http://yossense.com/</a>

なんてことはなく「Aタグ」に、「target="_blank"」を付けて、「class」を付けているだけです。ちなみに、「 target="_blank" class="exit"」を「えt」の変換で出るように単語登録しています。

2CSS

擬似要素「after」で「A」の後ろに画像を表示させています。

.exit:after {
content: url(http://yossense.com/images/article/icon_external.gif);
position: relative;
bottom: -0.19em;
margin-left: 0.3em;
}

ついでにアイコンフォントを使うとこんな感じです。

ヨッセンスのトップページはコチラです。

私はデザインが気に入らないという理由だけでこのアイコンフォントを使っていません。もっといいのが見つかればそっちにすると思いますが。追記: アイコンフォントにしました(自分で作った)。

ちなみに、上で触れた「アイコンフォント」に関してはウェブシュフ(@web_shufu)さんのこちらの記事に詳しくありますので、興味ある方はぜひやってみてください。

参考: 【WordPress高速化日記】アイコン画像を全てアイコンフォントにした|ウェブシュフ

さて、今回は新規タブ(新規ウィンドウ)で開くアンカーテキストに印を付けると良いよ!というお話でした。「after」とか「before」のような擬似要素は、ブラウザによっては対応していないものもあります。ほら、インターネット・エクスプローラーとか、IEとかですw。

でも、そのためだけに、全アンカーテキストに画像を一個一個入れるのも面倒だし「やっぱり画像やーめた!」ってときに、全記事を修正しないといけなくなります。でも擬似要素だと、CSSの一箇所を変えるだけで、一瞬で消せますので、擬似要素オススメです。

ちなみに新規ウィンドウと言えば、外部リンクを新規で開くか、同じウィンドウでいいかに関してはいろいろと議論があります。このブログでは外部リンクにはすべて「target="_blank"」を付けて新規ウィンドウ(新規タブ)で開くようにしています。なぜかというと、私個人はその方がやりやすいからです。ハイ。個人的な好みです。

有名ブログでも同じウィンドウ(タブ)で開く仕様にしているところも多いですがね~。私はいっぱいタブを開いて、要らなくなったら閉じる人なので。マウスジェスチャーで簡単に閉じれるようにしているので、タブを閉じるのに苦痛を感じないからかも。

擬似要素についてはこちらで詳しく書いています。

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!