外部リンクにアイコンを表示させて、別ウィンドウ（別タブ）で開くことを知らせる[ Font Awesome]とCSSのafter属性で一括設定

2019年11月19日2019年11月29日

　外部リンクにアイコンを表示させて、別ウィンドウ（別タブ）で開くことを知らせる方法です。設定方法は色々ありますが、この記事ではウエブフォント[Font Awesome ]とCSS設定を利用して表示する方法を紹介します。

　まず外部リンクとは、自分のサイトの外へ飛ぶリンクのことです。このような外部へのリンクは別のページや別のタブで開く設定にしてあることが多いです。文章中のURLリンクを貼った文字の後ろに「 」のようなアイコンを表示させることで、リンクをクリックする前に別ウィンドウで開くことを知らせることができ、ジャンプ後のページ操作で迷うことを防止できます（サイトの操作になれていないシニアや初心者では、新規ページに移ったことが把握できず元のページに戻る操作に困惑しますが、これを防ぐのに有効です）。

　表示方法には主に「画像ファイル」を利用する方法と、「ウエブフォント」を利用する方法があります。この記事では一般的に使われている[Font Awesome]というウエブフォントを利用する方法をご紹介します。
　また、設定方法は一括で設定できるCSSのアフター属性を利用した方法を使います。
今回ご紹介するのはHTMLの「target=“_blank" 」 （リンクを別ウィンドウで開かせるためのコード）を認識して、その後ろにアイコンを表示させるという設定方法です、また、サイドバーなどのリンクには適応しないように、記事内のリンクのみに表示されるように設定してみました。コードはコピペで使用していただけます。

外部URLは別ウィンドウで開く設定にする

まず、外部URLを設定する際に、現在表示させているウィンドウとは別のウィンドウ（タブ）で開くように設定しておきます。これからご紹介する方法は、別ウィンドウで開くための「target="_blank"」というコードを検知して、アイコンが表示されるように設定するので、この条件が必須です。

「同じウィンドウで開く」と「別ウィンドウで開く」の設定方法

まず、リンクを設定する場合の同じウインドウで開くと別のウィンドウで開くの設定方法について解説します。

同じウィンドウで開くリンクの設定方法

デモ↓↓↓クリックすると同じウィンドウで開きます
アフィリエイト入門

リンクを貼る文字を選択して、リンクボタンをクリックします。
URLの入力欄が表示されるので、リンク先のURLを入力します
右端の矢印ボタンをクリックします
完了です。

別のウィンドウで開くリンクの設定方法

デモ↓↓↓クリックすると別のウィンドウで開きます
アフィリエイト入門

リンクを貼る文字を選択して、リンクボタンをクリックします。
①URLの入力欄が表示されるので、リンク先のURLを入力します
②右端の歯車ボタンをクリックします

リンク挿入の詳細設定画面が開きます
③□リンクを新しいタブで開く　にチェックを入れます
④[更新]ボタンをクリックします。

結果表示とHTML表示

ブログでの表示結果と、記載されたHTMLの内容を確認します。

■結果表示
アイコンがなければ、見た目が一緒で区別がつきません。

■HTML表示
別ウィンドウで開くリンクには　「target="_blank"」というタグが記載されています。

では、上記の設定がされていることを前提として、外部リンクの後にアイコンを表示させる方法を解説します。

Font Awesome　を使って、外部リンクのアイコンを表示

「Font Awesome」は、最も一般的に利用されているといってもよい、ウエブフォントのアイコンです。フォントなので、文字と同じように扱えて文字の大きさや色などを簡単に変えることができるので便利です。種類も多く無料で利用できます（有料プランもあり、無料よりも多くの種類のフォントを利用することができます）

Font Awesomeを使う準備

「Font Awesome」はネット上にあるアイコンデータを随時参照する形で利用します、なので参照するリンク元のURLをあらかじめ指定しておきます。設定はサイトのヘッダー部分に書き込みます。（＊データーをダウンロードする方法もあります）
　ここではWordPressのテーマを利用していることを想定して、設定方法を案内します。利用するテーマによって設定方法は異なりますが、子テーマを利用できる場合の設定方法です（＊子テーマがない場合は下記の子テーマを利用しない場合を参照ください）。キャプチャーは、無料テーマ　Luxeritas（ルクセリタス ）での設定方法です。

WordPressのダッシュボード、左メニューで　[Luxeritas]>>[子テーマの編集]をクリックします。

子テーマの画面が開きます。
①　[Headタグ]のタブをクリックします。
②記載されているコードの一番下に以下のコードを貼り付けます。

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

上部タブの[◯保存]をクリックします。

変更を反映しました、と表示させたらOKです。

これで、フォントを表示させる準備ができました。

スタイルシートの設定（一括で設定）

では、実際にアイコンを表示させる設定です。まず、一箇所に設定するだけで、今まで設定している外部URL（別ウィンドウで開く設定にしている場合）もこれから設定する外部URL（別ウィンドウで開く設定にしている場合）にも全てアイコンが表示されます。楽チンで便利です。

WordPressのダッシュボード、左メニューで　[Luxeritas]>>[子テーマの編集]をクリックします。

子テーマの画面が開きます。
　[style.css]のタブをクリックします。

画面をスクロールさせて、記載されているコードの一番下に以下のコードを貼り付けます。

①コードの説明を記載します　「/*    */」で囲みます
②「target="_blank"」というコードの後ろに表示するという意味です
*「#main」で表示される領域を限定します、サイドバーなどには表示されません

③ウエブフォントの「Font Awesome5」を使うという意味です
④アイコンの形を指定します
⑤アイコンと文字とのマージン（間隔）を指定します
⑥フォントの太さ具合（細字か太字かを）を指定します
⑦フォントサイズを指定します（標準に対する割合で指定しています）

■以下のコードをコピペできます

/* 外部リンクのアイコン表示 */
#main  a[target="_blank"]:after{
  font-family: "Font Awesome 5 Free";
  content: "\f360";
  margin: 0 4px;
  font-weight: 600;
  font-size: 1.1em;
}

入力が完了したら画面上部の[保存]をクリックします。

保存ボタンをクリッックした際に、以下のような画面がでたら、[このページを離れる]をクリックしてください。
＊使用するブラウザによって状況はことなります。

子テーマの編集の下に、「変更を反映しました」と表示されればOKです、念の為スタイルシート内にコードが追加されていることを確認してください。

これで設定は完了です。

ブログの表示を確認

リンクを貼った文字の後ろに「アイコン」が表示されます。
＊アイコンは文字サイズに指定によって大小します

■以下のコードをコピペできます

/* 外部リンクのアイコン表示 */
 a[target="_blank"]:after{
  font-family: "Font Awesome 5 Free";
  content: "\f360";
  margin: 0 4px;
  font-weight: 600;
  font-size: 1.1em;
}

ちょっと応用 (アイコンを表示させたい場所にだけ設定する方法)

フォントアイコンを、全体に一括設定するのではなく、表示したい所にだけ表示させる方法です。その都度コードの挿入が必要ですが、表示位置を思い通りに設定できます

Font Awesomeを使う準備

上記の
【Font Awesomeを使う準備】　を実施してヘッダーにFont Awesomeへのリンクを設定します。

記事への挿入

表示させたい記事の表示させたい箇所へ、コードを挿入します。

クラッシックエディッターの場合

記事の投稿画面で、エディターの表示を　ビジュアルから[テキスト]に変えます

テキストモードに変わります

新エディター（Gutenberg）の場合

①画面の右上にある「ツールと設定をさらに表示」のボタンをクリックします

メニューが表示されるので
②「コードエディター」をクリックします。

編集画面がコード表示に変わります。

コードの挿入（新・旧共通）

アイコンを表示させたい文字をさがします、
文字のすぐ後ろに下記のコードを挿入します。

挿入するコード

■「external-link-square-alt」の挿入

<i class="fas fa-external-link-square-alt"></i>

■「external-link-alt」の挿入

<i class="fas fa-external-link-alt"></i>

ブログの表示確認

ブログの表示を確認します、アイコンが表示されています（^^）

アイコンフォントの種類

Font Awesomeの無料プランで利用できる外部リンク用のアイコンは以下の２種類です
CSSの設定ではユニコード（Unicode)を使います。

■external-link-square-alt

• Solid Style (fas)
• Unicode:f360
  
• HTML:<i class="fas fa-external-link-square-alt"></i>
  

■external-link-alt

• Solid Style (fas)
• Unicode:f35d
  
• HTML:<i class="fas fa-external-link-alt"></i>

   

＊色は決まっていません、CSSで色を指定することもできます。

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい！ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
＊特典を受け取った後にメルマガを解除いただいても構いません。
＊解除に対しての手数料もかかりません。

ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。

SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 （キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません）
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。