WEB制作歴も長いブロガーのヨス(@yossense)です!うん。今思ったけど、WEBの仕事をしているのに、WEBの記事ってあんまり書いていないですね。他のサイトを見ているときにときどき思う、アンカーテキスト(リンクテキスト)のお話です。「新規ウィンドウ」で開くときは分かるように念のため、最初に説明しておくと、アンカーテキストとは、こういうやつのことです。ヨッセンスのトップページはコチラです。上の例で言うと「トップページはコチラ」という部分がアンカーテキストです。文字で、クリックすると別のページに移動するヤツをアンカーテキスト(リンクテキスト)と言います。新規ウィンドウで開くときは印をつけて欲しいそのアンカーテキストをクリックしたときに、新規タブ(新規ウィンドウ)で開くことがあります。同じタブで開くと思っていたらビックリします。ほら、下のアンカーテキストをクリックしてみて下さい!!ヨッセンスのトップページはコチラです。そんなときに「これは新規タブで開きますぞ!!」と分かる印があればよくわかりますよね。いうか「お、新規で開くんやな」と身構えることができます。画像からアイコンフォントに変更しました。ヨッセンスのトップページはコチラです。マークはいろいろあると思いますが、こんなマークがあると分かりやすいですよね。私の場合は、CSSの擬似要素「after」を使って、アンカーテキストの後ろにこのマーク(画像)が出るようにしています。別に画像じゃなくてアイコンフォントでも問題ありません。サイトスピードで言うと、むしろその方がいいですね。class="exit">https://yossense.com/</a>なんてことはなく「Aタグ」に、「target="_blank"」を付けて、「class」を付けているだけです。class="exit"」を「えt」の変換で出るように単語登録しています。2CSS擬似要素「after」で「A」の後ろに画像を表示させています。0.3em;}ついでにアイコンフォントを使うとこんな感じです。ヨッセンスのトップページはコチラです。私はデザインが気に入らないという理由だけでこのアイコンフォントを使っていません。いいのが見つかればそっちにすると思いますが。アイコンフォントにしました(自分で作った)。ちなみに、上で触れた「アイコンフォント」に関してはウェブシュフ(@web_shufu)さんのこちらの記事に詳しくありますので、興味ある方はぜひやってみてください。【WordPress高速化日記】アイコン画像を全てアイコンフォントにした|ウェブシュフさて、今回は新規タブ(新規ウィンドウ)で開くアンカーテキストに印を付けると良いよ!というお話でした。「after」とか「before」のような擬似要素は、古いブラウザによっては対応していないものもあります。このブログでは外部リンクにはすべて「target="_blank"」を付けて新規ウィンドウ(新規タブ)で開くようにしています。いうと、わたし個人はその方がやりやすいからです。有名ブログでも「同じウィンドウ(タブ)で開く仕様」にしているところも多いですがね~。わたしはいっぱいタブを開いて、要らなくなったら閉じる人なので。擬似要素についてはこちらで詳しく書いています。擬似要素「before」「after」の基本から使い方までを徹底紹介!!WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。」という超ターゲットを絞ったコースがあります。このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。https://techacademy.jp/webrenewal-programパートナーこの記事、おもしろかったわ。CSSのカテゴリ」にあるきん、そっち見てや。この記事が気に入ったらいいねしよう!最新記事をお届けします。オレンジメールプロフィールTwitterFacebook香川県在住。ブログで飯食っているプロブロガー(月間125万PV達成)のヨスです。効率化オタクが講じて、KADOKAWAから書籍も出版しました。英語学習メディア「英語びより」編集長。ブログを本気で書く人のためのオンラインサロン「ヨッセンスクール」を運営。夫婦別姓を実行してて、何度か新聞からも取材を受けてます。ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。