楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

超簡単!「新しいウィンドウで開く」リンクにアイコンマークをつける方法

2016/09/12

リンクの横に付いてる小さなマークはいったい何?

いろんなサイトを見ていると、よくリンクの横に“四角”や“矢印”とかでできた、ちょうどこんな感じの小さなアイコンのマークを見かけませんか?

「新しいウィンドウで開く」リンクのアイコンマーク

これは外部リンクを表すマークで、一般的にこのマークが付いているリンクをクリックすると「新しいウィンドウ(タブ)で開く」ようになってることが多いんですが。

このマークを当ブログでも表示されるようにしようと思いまして、いろいろ調べてやってみたので記録として記事にしておきます。

今回は、CSSと“Font Awesome”というフリーで使えるWebフォントを利用しましたが。

WordPressのプラグインで、「External Links」や「WP External Links」というものもありますので、プラグインでやる方法を知りたいと思われる方は、そちらの利用について別途調べて頂ければと。

“Font Awesome”を使えるようにするには

“Font Awesome”

実はこのブログで使用しているWordPressのテーマ“STINGER7”には、ヘッダの部分に以下のような記述がありまして。

<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' />

これは「テーマのための関数(function.php)」のファイル中で設定されてるんですが、この1行によって既に“Font Awesome”が使えるようになってるんですね。

ですから環境が違う方が、もしも同じ手順をやってみてもうまくいかないという場合、上記の1行をヘッダに書き加えればうまくいくかも知れませんので試してみてください。

WordPressの場合は、「テーマヘッダー(header.php)」というファイルがありますので。

管理画面の「外観」から「テーマの編集」をクリックして、表示されたページの右のファイル一覧から「テーマヘッダー(header.php)」を選んで、これを編集することになります。

“ </head>”という記述がありますから、その直前にでも挿入してやれば問題無いかと。

プラグイン「Simple Custom CSS」をインストールする

以前「WordPressのテーマSTINGER7で記事の文字の大きさを変更する簡単な方法 」という記事の中でも紹介しましたが、「Simple Custom CSS」というプラグインがありまして。

プラグイン「Simple Custom CSS」

これはスタイルシートを記述したファイルを直接に編集することなく、CSSの設定を変更することができるという便利なプラグインなんですね。

当ブログで使用しているWordPressでは既にインストール済みなので、今回もこれを利用しました。

子テーマを導入するなどして、スタイルシートのファイル(style.css)を直接編集するやり方を好まれる方は、この章の部分は関係の無い話になりますが。

私は、テーマのファイルを直接編集するのは避けたいという方針なので、このプラグインがとても気に入ってまして。

同様の方針の方は、プラグインの新規追加のページで検索してインストールすることをおすすめしますよ。

CSSにアイコンマークを表示する設定を追加する

さて、プラグインをインストールした場合は、それを有効化すると管理メニューの「外観」に「Custom CSS」という項目が追加されますので。

その「Custom CSS」のページに表示されるテキストフィールドに、マークを表示する設定のCSSを書き込むことによって、元々のスタイルシートにその設定が追加されることになりますが。

スタイルシートのファイルを直接編集する場合は、そのファイルに追加のCSSを書き込むことになります。

CSSにマークを表示する設定を追加する内容は、以下のとおりで。

.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 p」とい記述で、“記事の中”を指定しています。

そして「新しいウィンドウ(タブ)で開く」ようになっているリンクかどうかを識別する手段として、「target=”_blank”」という属性がリンクに設定されているかどうかという点で判断しています。

表示する Webフォントの中 のアイコンマークの種類は、 「content: ”¥f08e”」という記述によって指定しています。

なお、ここではマークのサイズを「12px」とし、マークの左右の余白を3pxとしていますが、これは記事の文字のサイズ等に合わせて調整するところですね。

このブログでは、結果として以下のように目的のマークが付くようになりましたよ。

【例】google.co.jp(新しいウィンドウかタブで開きます)

ひとつ問題なのは、画像リンクなどにアイコンマークを付けたくないときはどうするかという点でして。

その場合は、該当のリンクのaタグに「class=“noicon”」のようなクラスをつけてやったうえで、

.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;
}

のように、擬似クラスの「:not」を指定することで対応しましょう。

スポンサーリンク

まとめ

このようにCSSと“Font Awesome”というWebフォントで、目的のとおりに首尾よく実現できましたが。

前述のようにプラグインを使う方法や、それからアイコンのマークにフォントではなく画像を使うという方法もあります。

検索してみると、いろんな種類の画像が配布されてますので、Webフォントよりも気に入ったものがあったら、それを使ってみるのも良いでしょうね。

ちなみに、画像を使う場合は以下のようなCSSの設定で実現できますので、ご参考まで。

/* 通常のアイコン */
.post p a[target="_blank"]:after {
    content:url(【画像ファイルのURL】);
    margin:0 3px;
}
/* マウスオーバーしたときのアイコン */
.post p a:hover[target="_blank"]:not(img):after {
    content:url(【画像ファイルのURL】);
    margin:0 3px;
}

ついでながら、“Font Awesome”には他にもいろんなアイコンマークがありまして、興味のある方は以下のサイトでご確認を。

“Font Awesome”のアイコン

それでは、よいブログ・ライフを!

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

スポンサーリンク

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-,