Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

External Linksで外部リンクにアイコンを表示させよう

2017/03/05

サイトを運営していると、便利なサイトや参考になるサイトにリンクを張ることがありますよね。このときテキストリンクのみだと、リンク先が内部リンクなのか外部リンクなのか、判断しにくい場合があります。

「外部リンクにアイコンが付いてるサイトがあるけど、アレどうやってるのかな~?」

と思ってたんですが、便利なプラグインがあるみたい。

プラグイン「External Links」を使えば、外部リンクのみにアイコンを表示させることができ、閲覧者に分かりやすく伝えることができます。

私が使っているレンタルサーバーは、エックスサーバーです。

こんな風にテキストリンクの後ろにアイコンが自動で表示されるんです。
※現在プラグインの利用を停止しております。

このページでは、External Linksのインストール手順と設定方法、アイコンの変更方法について解説します。

スポンサーリンク

External Linksとは

External Linksとは、外部リンクに対する設定を手軽に行えるプラグインです。

  • アイコンを付ける
  • nofollow属性を付ける
  • 別タブで開く

上記のような設定が簡単に行えます。

外部リンクにアイコンを付ける

これは冒頭でも説明したように、テキストリンクの後ろにアイコンを自動で付ける設定です。

アイコンが付いていればパッと見て外部リンクだと分かるので、閲覧者にとって有難いのではないでしょうか。リンクをクリックしてみたら、実は外部サイトだった…なんて経験ありませんか?

当ブログでは、もちろんアイコンを付ける設定をしています。

外部リンクにnofollow属性を付ける

nofollow属性を付けるとクローラーはリンク先を辿りません。「リンク先は、うちのサイトとは関係ありませんよ~。」と検索エンジンに伝えることになります。通常、個別に「rel=”nofollow”」を付けて設定しますが、プラグインの設定からまとめて行うことが可能です。

外部リンクに対してnofollowを設定するかどうかは人それぞれだと思いますが、当ブログでは設定していません。

SEO対策でnofollowを設定すべきという意見もありますが、当ブログは個人で運営して、外部リンクも私自身が信用できると思うサイトにしか張っていません。

「参考サイトです♪(うちとは関係ありません。)」では、おかしいでしょ。

もし怪しいサイトにリンクを張る必要があれば、個別に設定すればいいかなと思います。

どのような場合にnofollowを使えばいいかは、Search Console ヘルプに目を通してみてください。

外部リンクを別タブで開く

外部リンクを別タブで開くように設定できます。

リンクを新しいタブで開く

投稿画面からリンク作成時に設定するか、「target="_blank"」を設定する必要がありましたが、プラグインで外部リンクは別タブで開くようにまとめて設定できます。

同タブで開いた方がいい、別タブの方がいい、どちらの意見もあります。パソコンだとリンク元のページを残しておいて外部は別タブが見やすいとか、スマホだとスワイプで戻れるので外部も同タブなら操作しやすいとか。

個人的には外部リンクは別タブで開いた方がいいと思っていますし、そちらの方が好みです。

リンク元のタブが残っていれば、他のサイトを見た後で戻ってきて、別のページも見てくれそうな気がしますよね。

External Linksのインストール手順

WordPress管理画面で「プラグイン」⇒「新規追加」をクリック。

external-links-01

検索欄に「External Links」と入力し、プラグインを検索。

external-links-02

「今すぐインストール」⇒「有効化」を行います。

これでExternal Linksのインストールが完了しました。

External Linksの設定方法

WordPress管理画面で「設定」⇒「External Links」をクリック。

external-links-03

設定は全部で9項目あります。

  • Apply Globally:全ての外部リンクに設定を適用する
  • Apply to Text Widgets:テキストウィジェットにも設定を適用する
  • Treat Subdomains as Local:サブドメインを内部リンクとして扱う
  • Auto Convert Text Urls:入力したURLを自動でリンクにする
  • Add No Follow:外部リンクにnofollowタグを付ける
  • Add Icons:外部リンクにアイコンを付ける
  • Open in New Windows:外部リンクを別タブで開く
  • Exclude HTML Code BlocksDomains to Exclude:HTMLコード内のリンクは処理しない
  • Domains to Exclude:このプラグインの設定を適用しないドメイン

各項目、必要に応じてチェックを入れてください。設定後は「Save Changes」で保存。

アイコンの変更方法

アイコンを付ける設定を行うと以下のようなアイコンがリンクの右側に表示されます。

external-links-アイコン

デフォルトで用意されているアイコンは1種類のみで、プラグインの設定からは変更できません。しかし、FTPソフトでアイコン画像を差し替えることで変更可能となります。

/wp-content/plugins/sem-external-links

サーバー内の上記のフォルダ「sem-external-links」にアクセスしてください。

フォルダ内の「external.png」という画像ファイルがアイコンとして利用されるようになっています。なので、新しいアイコン画像に「external.png」と名前を付けて、フォルダにアップロードすればアイコンが変更されます。

元の画像ファイルは削除せずに「external_old.png」などに変更しておけば、いつでも元に戻すことができます。

当ブログで利用しているアイコン画像は、こちらを利用させてもらいました。

100 External Link Icons (PNG, PSD) | Vector Icons

フリー素材なのに、5種類のデザインにそれぞれ20色、計100個のアイコンが用意されていて非常に便利です。

参考サイト

アイコンの変更方法はこちらのサイトを参考にさせていただきました。ありがとうございます。

【プラグイン】「External Links」で外部リンクのアイコンを付ける&アイコンの変更方法

まとめ

External Linksを利用すれば、簡単に外部リンクの設定が行えます。

nofollow属性やリンクの開き方をどうするかは、それぞれ考え方がありますし、どのようなサイトを運営しているかでも判断が変わってくるでしょう。

アイコンはあった方がユーザーにとって分かりやすいと思いますよ。

ぜひ利用してみてください。

-WordPress

スポンサーリンク