こんにちは! WEB制作歴も長いブロガーのヨス（プロフィールはこちら）です!
うん。今思ったけど、WEBの仕事をしているのに、WEBの記事ってあんまり書いていないですね。いろいろ書きたいことはあるのでちょっとずつアウトプットしていこうと思っています!
では今回は、 他のサイトを見ているときにときどき思う、アンカーテキスト（リンクテキスト）のお話です。
「新規ウィンドウ」で開くときは分かるように
念のため、最初に説明しておくと、アンカーテキストとは、こういうやつのことです。
ヨッセンスのトップページはコチラです。
上の例で言うと「トップページはコチラ」という部分がアンカーテキストです。文字で、クリックすると別のページに移動するヤツをアンカーテキスト（リンクテキスト）と言います。
新規ウィンドウで開くときは印をつけて欲しい
そのアンカーテキストをクリックしたときに、新規タブ（新規ウィンドウ）で開くことがあります。てっきり同じタブで開くと思っていたらビックリします。ほら、下のアンカーテキストをクリックしてみて下さい!!
ヨッセンスのトップページはコチラです。
ね、新しいウィンドウで開きましたよね? 不意打ちちっくで、なんかウザくないですか?! そんなときに「これは新規タブで開きますぞ!!」と分かる印があればよくわかりますよね。というか「お、新規で開くんやな」と身構えることができます。
なので私の場合、このブログでは、こんな画像が出るようになっています追記: 画像からアイコンフォントに変更しました。
ヨッセンスのトップページはコチラです。
マークはいろいろあると思いますが、こんなマークがあると分かりやすいですよね。
ソースを紹介
私の場合は、CSSの擬似要素「after」を使って、アンカーテキストの後ろにこのマーク（画像）が出るようにしています。別に画像じゃなくてアイコンフォントでも問題ありません。ってかサイトスピードで言うと、むしろその方がいいですね。
html
<a href="https://yossense.com/" target="_blank" class="exit">https://yossense.com/</a>
なんてことはなく「Aタグ」に、「target="_blank"」を付けて、「class」を付けているだけです。ちなみに、「 target="_blank" class="exit"」を「えｔ」の変換で出るように単語登録しています。
CSS
擬似要素「after」で「A」の後ろに画像を表示させています。
.exit:after {
content: url(https://yossense.com/images/article/icon_external.gif);
position: relative;
bottom: -0.19em;
margin-left: 0.3em;
}
ついでにアイコンフォントを使うとこんな感じです。
ヨッセンスのトップページはコチラです。
私はデザインが気に入らないという理由だけでこのアイコンフォントを使っていません。もっといいのが見つかればそっちにすると思いますが。追記: アイコンフォントにしました（自分で作った）。
ちなみに、上で触れた「アイコンフォント」に関してはウェブシュフ(@web_shufu)さんのこちらの記事に詳しくありますので、興味ある方はぜひやってみてください。
さて、今回は新規タブ（新規ウィンドウ）で開くアンカーテキストに印を付けると良いよ!というお話でした。「after」とか「before」のような擬似要素は、古いブラウザによっては対応していないものもあります。
このブログでは外部リンクにはすべて「target="_blank"」を付けて新規ウィンドウ（新規タブ）で開くようにしています。
なぜかというと、わたし個人はその方がやりやすいからです。
有名ブログでも「同じウィンドウ（タブ）で開く仕様」にしているところも多いですがね～。
わたしはいっぱいタブを開いて、要らなくなったら閉じる人なので。
擬似要素についてはこちらで詳しく書いています。
WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。
たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]
なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。
このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。
つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。
プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。しかも1週間の無料体験ができるそうなので、気軽にお申込みできますね!
- Webリニューアル集中プログラム無料体験: https://techacademy.jp/webrenewal-program
