今回は外部リンクのアイコンについての記事です。
特に記事が増えてきてから一つずつ外部リンクにアイコンを付けるのって手間ですよね。
実は超簡単に外部リンクの後ろにアイコンを付ける方法があるんです！
この記事では以下の内容について紹介しています。
どうして外部リンクの後ろにアイコンを付けるの？
WP External Linksを使用してアイコンを付ける方法
WP External Linksでアイコンを付けたくない場所の設定方法
今回はWP External Linksというプラグインを使用して、外部リンクの後ろにくっついているこのマークを簡単に付けるやり方を紹介しています。
誰でも作業時間１０分もかからずに、すべてのページの外部リンクにアイコンが付きますよ。
アイコンをつけるのはSEO対策
外部リンク（別のサイトページへのリンク）の後ろに、こんなアイコンが付いてるのをよく見かけますね。
（↑実際のYahoo!Japanへの外部リンク）
このアイコンは自分のページから別サイトのページが開きますよ～という印なのです。
ユーザビリティの向上（文字色だけでなく視覚的に別のページへ移るというのがわかる）ということでSEO的によろしいものだと言われています。
WP External Linksを使ってアイコンを付ける
今回はWP External Linksというプラグインを使ったアイコンを付け方を紹介します。
よくプラグインを入れすぎると重くなると言われています。
そのためプラグインを入れずにCSSを利用してアイコンを付ける方法を紹介している方もいます。
しかしたった１個のプラグインで重くなってしまうより、手軽にアイコンを付けることができるほうが効率がいいでしょう。
（むしろこの１個のプラグインを入れたタイミングで重くなってしまうこともないかと思われます…）
プラグインを導入し、少し設定するだけであっという間に自分のブログ内の外部リンクにアイコンを付けることができます。
WP External Linksのインストール
まずはWP External Linksというプラグインをインストールし、有効化しましょう。
※ここの部分ではプラグインのインストール方法がわかっている方は次の設定方法へ進めてください。
まずダッシュボードから プラグイン→新規追加 を選択します。
WP External Linksと入力して検索、今すぐインストールをクリック。
インストール完了後、有効化をクリックします。
有効化をクリックしないとダッシュボードに「外部リンク」が表示されません。
インストール後は必ず有効化をクリックしましょう。
ダッシュボードに「外部リンク」が表示されているはずです。
これでプラグイン導入が完了です。
続いて、設定方法を説明していきます。
WP External Linksの設定方法
次にWP External Linksの設定の仕方です。
今回は自分のサイトの中にある外部リンクの後ろにアイコンを付けることが目的なので、他の機能の説明は省略します。
ダッシュボードに表示されている「外部リンク」をクリックします。
開いたら外部リンクというタブの設定を行います。
下の画像の①から④の部分を確認してください。
①設定を適用にチェックします。
②別の新しいウィンドウまたはタブを選択。
③nofollowを選択。
④rel属性はすべてチェックを入れます。
外部リンクタブの続きです。
以下の⑤から⑧を確認してください。
⑤アイコンの種類は画像を選びます。
⑥アイコンの画像を選びます。
※注意：この部分は⑤で画像を選択しないと表示されません。
⑦アイコンの位置を設定します。たいていの場合、右かと…
⑧チェックボックスにチェックしておきます。
最後に変更を保存を押してください。
これですべてのページの外部リンクの後ろにアイコンが付きます。
簡単ですよね♬
シェアボタンの後ろのアイコンを消す
実はこのままだとありとあらゆる部分の外部リンクにアイコンが付くので、こんな場所にも付いてしまいます。
ブログランキングの後ろはともかく、まさかのTwitterやFacebookのシェアボタンの下までアイコンが付いてしまいます。
次に、この部分だけ付けたくない！という設定を行います。
ダッシュボードの外部リンクから例外というタブをクリックします。
設定するのは以下の①から③です。
①チェックを入れます。
②外部リンクから除外したいURLを入力します
（下で詳細を説明しています）
③外部リンクを内部リンクと扱うを選択
最後に変更を保存を押します。
外部リンクから除外したいURLの欄にはTwitterやLINEなどのURLを入れます。
シェアボタンのTwitter・Facebookや、アフィリエイトのAmazonや楽天も付けたくない場合は入力しましょう。
URLがわからない場合、いったんシェアボタンを押し、開いたページのアドレスの部分を入力します。
この部分の入力はhttpなどがなくてもtwitter.comなどで対応してくれます。
複数ある場合、「,（コンマ）」で区切るか、改行して入力します。
（ぴよすけはわかりやすいように改行しました）
この入力が終わって保存すると消えています。
参考までにtwitterとLINEだけ設定しなかった場合のサンプルです
あっという間にすべての設定が完了
いかがでしたか？
プラグインが多いと重くなる…とはいえ、ひとつずつアイコンを付けていくのは大変な作業です。
このプラグインなら一瞬ですべての外部リンクにアイコンが付きますよ！
それでは、本日もよいブログライフを！
最後までお読みいただきありがとうございました。
↓↓↓クリックしていただくとぴよすけが泣いて喜びます。