超簡単！「新しいウィンドウで開く」リンクにアイコンマークをつける方法
2020/04/01
リンクの横に付いてる小さなマークはいったい何？
いろんなサイトを見ていると、よくリンクの横に“四角”や“矢印”とかでできた、ちょうどこんな感じの小さなアイコンのマークを見かけませんか？
これは外部リンクを表すマークで、一般的にこのマークが付いているリンクをクリックすると「新しいウィンドウ(タブ)で開く」ようになってることが多いんですが。
このマークを当ブログでも表示されるようにしようと思いまして、いろいろ調べてやってみたので記録として記事にしておきます。
今回は、ＣＳＳと“Ｆｏｎｔ Ａｗｅｓｏｍｅ”というフリーで使えるＷｅｂフォントを利用しましたが。
ＷｏｒｄＰｒｅｓｓのプラグインで、「Ｅｘｔｅｒｎａｌ Ｌｉｎｋｓ」や「ＷＰ Ｅｘｔｅｒｎａｌ Ｌｉｎｋｓ」というものもありますので、プラグインでやる方法を知りたいと思われる方は、そちらの利用について別途調べて頂ければと。
“Ｆｏｎｔ Ａｗｅｓｏｍｅ”を使えるようにするには
実はこのブログで使用しているＷｏｒｄＰｒｅｓｓのテーマ“ＳＴＩＮＧＥＲ７”には、ヘッダの部分に以下のような記述がありまして。
<link rel='stylesheet' id='font-awesome-css' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css?ver=4.5.0' type='text/css' media='all' />
これは「テーマのための関数(ｆｕｎｃｔｉｏｎ．ｐｈｐ)」のファイル中で設定されてるんですが、この１行によって既に“Ｆｏｎｔ Ａｗｅｓｏｍｅ”が使えるようになってるんですね。
ですから環境が違う方が、もしも同じ手順をやってみてもうまくいかないという場合、上記の１行をヘッダに書き加えればうまくいくかも知れませんので試してみてください。
ＷｏｒｄＰｒｅｓｓの場合は、「テーマヘッダー(ｈｅａｄｅｒ．ｐｈｐ)」というファイルがありますので。
管理画面の「外観」から「テーマの編集」をクリックして、表示されたページの右のファイル一覧から「テーマヘッダー(ｈｅａｄｅｒ．ｐｈｐ)」を選んで、これを編集することになります。
“ ＜／ｈｅａｄ＞”という記述がありますから、その直前にでも挿入してやれば問題無いかと。
プラグイン「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」をインストールする
以前「ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７で記事の文字の大きさを変更する簡単な方法 」という記事の中でも紹介しましたが、「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」というプラグインがありまして。
これはスタイルシートを記述したファイルを直接に編集することなく、ＣＳＳの設定を変更することができるという便利なプラグインなんですね。
当ブログで使用しているＷｏｒｄＰｒｅｓｓでは既にインストール済みなので、今回もこれを利用しました。
子テーマを導入するなどして、スタイルシートのファイル(ｓｔｙｌｅ．ｃｓｓ)を直接編集するやり方を好まれる方は、この章の部分は関係の無い話になりますが。
私は、テーマのファイルを直接編集するのは避けたいという方針なので、このプラグインがとても気に入ってまして。
同様の方針の方は、プラグインの新規追加のページで検索してインストールすることをおすすめしますよ。
ＣＳＳにアイコンマークを表示する設定を追加する
さて、プラグインをインストールした場合は、それを有効化すると管理メニューの「外観」に「Ｃｕｓｔｏｍ ＣＳＳ」という項目が追加されますので。
その「Ｃｕｓｔｏｍ ＣＳＳ」のページに表示されるテキストフィールドに、マークを表示する設定のＣＳＳを書き込むことによって、元々のスタイルシートにその設定が追加されることになりますが。
スタイルシートのファイルを直接編集する場合は、そのファイルに追加のＣＳＳを書き込むことになります。
ＣＳＳにマークを表示する設定を追加する内容は、以下のとおりで。
.post p a[target="_blank"]:after {
content: "\f08e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin: 0 3px;
}
この設定によって、“記事の中で「新しいウィンドウ(タブ)で開く」ようになっているリンクの後ろにマークが付く”ようになるんですが。
まず「.post ｐ」とい記述で、“記事の中”を指定しています。
そして「新しいウィンドウ(タブ)で開く」ようになっているリンクかどうかを識別する手段として、「ｔａｒｇｅｔ＝”＿ｂｌａｎｋ”」という属性がリンクに設定されているかどうかという点で判断しています。
表示する Ｗｅｂフォントの中 のアイコンマークの種類は、 「ｃｏｎｔｅｎｔ： ”￥ｆ０８ｅ”」という記述によって指定しています。
なお、ここではマークのサイズを「１２ｐｘ」とし、マークの左右の余白を３ｐｘとしていますが、これは記事の文字のサイズ等に合わせて調整するところですね。
このブログでは、結果として以下のように目的のマークが付くようになりましたよ。
【例】ｇｏｏｇｌｅ．ｃｏ．ｊｐ(新しいウィンドウかタブで開きます)
ひとつ問題なのは、画像リンクなどにアイコンマークを付けたくないときはどうするかという点でして。
その場合は、該当のリンクのａタグに「ｃｌａｓｓ＝“ｎｏｉｃｏｎ”」のようなクラスをつけてやったうえで、
.post p a[target="_blank"]:not(.noicon):after {
content: "\f08e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin: 0 3px;
}
のように、擬似クラスの「：ｎｏｔ」を指定することで対応しましょう。
まとめ
このようにＣＳＳと“Ｆｏｎｔ Ａｗｅｓｏｍｅ”というＷｅｂフォントで、目的のとおりに首尾よく実現できましたが。
前述のようにプラグインを使う方法や、それからアイコンのマークにフォントではなく画像を使うという方法もあります。
検索してみると、いろんな種類の画像が配布されてますので、Ｗｅｂフォントよりも気に入ったものがあったら、それを使ってみるのも良いでしょうね。
ちなみに、画像を使う場合は以下のようなＣＳＳの設定で実現できますので、ご参考まで。
/* 通常のアイコン */
.post p a[target="_blank"]:after {
content:url(【画像ファイルのＵＲＬ】);
margin:0 3px;
}
/* マウスオーバーしたときのアイコン */
.post p a:hover[target="_blank"]:not(img):after {
content:url(【画像ファイルのＵＲＬ】);
margin:0 3px;
}
ついでながら、“Ｆｏｎｔ Ａｗｅｓｏｍｅ”には他にもいろんなアイコンマークがありまして、興味のある方は以下のサイトでご確認を。
それでは、よいブログ・ライフを！
