注目キーワード
  1. 小説
  2. 考察
超簡単!WP External Linksを使って外部リンクの後ろにアイコンを付ける方法

超簡単!WP External Linksを使って外部リンクの後ろにアイコンを付ける方法

今回は外部リンクのアイコンについての記事です。

 

外部リンクの後ろにくっついてるマークって、必要なの?
記事が多くなってきたからイチイチ付けるの手間だなぁ…

特に記事が増えてきてから一つずつ外部リンクにアイコンを付けるのって手間ですよね。

 

実は超簡単に外部リンクの後ろにアイコンを付ける方法があるんです!

 

この記事では以下の内容について紹介しています。

 

どうして外部リンクの後ろにアイコンを付けるの?

WP External Linksを使用してアイコンを付ける方法

WP External Linksでアイコンを付けたくない場所の設定方法

 

今回はWP External Linksというプラグインを使用して、外部リンクの後ろにくっついているこのマークを簡単に付けるやり方を紹介しています。

 

誰でも作業時間10分もかからずに、すべてのページの外部リンクにアイコンが付きますよ。

ぴよすけもこのプラグインを使ってアイコンを付けました!

 

スポンサーリンク

 

アイコンをつけるのはSEO対策

外部リンク(別のサイトページへのリンク)の後ろに、こんなアイコンが付いてるのをよく見かけますね。

 


Yahoo!Japan

(↑実際のYahoo!Japanへの外部リンク)


 

このアイコンは自分のページから別サイトのページが開きますよ~という印なのです。

 

ユーザビリティの向上(文字色だけでなく視覚的に別のページへ移るというのがわかる)ということでSEO的によろしいものだと言われています。

 

外部リンクは文字色を変えればいいんじゃないの?
アイコンがあることで視認性を高めてるんですよ~

 

WP External Linksを使ってアイコンを付ける

今回はWP External Linksというプラグインを使ったアイコンを付け方を紹介します。

 

よくプラグインを入れすぎると重くなると言われています。

 

そのためプラグインを入れずにCSSを利用してアイコンを付ける方法を紹介している方もいます。

 

しかしたった1個のプラグインで重くなってしまうより、手軽にアイコンを付けることができるほうが効率がいいでしょう。

(むしろこの1個のプラグインを入れたタイミングで重くなってしまうこともないかと思われます…)

 

プラグインを導入し、少し設定するだけであっという間に自分のブログ内の外部リンクにアイコンを付けることができます。

 

この記事を見ながらでも10分でアイコンが付けれますよ♪

 

スポンサーリンク

WP External Linksのインストール

まずはWP External Linksというプラグインをインストールし、有効化しましょう。

※ここの部分ではプラグインのインストール方法がわかっている方は次の設定方法へ進めてください。

 

 

まずダッシュボードから プラグイン→新規追加 を選択します。

Wordpressダッシュボード画面

 

 

 

WP External Linksと入力して検索、今すぐインストールをクリック。

プラグイン-新規追加

 

 

 

インストール完了後、有効化をクリックします。

有効化をクリック

 

有効化をクリックしないとダッシュボードに「外部リンク」が表示されません。

インストール後は必ず有効化をクリックしましょう。

 

 

ダッシュボードに「外部リンク」が表示されているはずです。

ダッシュボードに外部リンク追加

 

 

これでプラグイン導入が完了です。

続いて、設定方法を説明していきます。

 

 

WP External Linksの設定方法

次にWP External Linksの設定の仕方です。

今回は自分のサイトの中にある外部リンクの後ろにアイコンを付けることが目的なので、他の機能の説明は省略します。

 

 

ダッシュボードに表示されている「外部リンク」をクリックします。

ダッシュボードの外部リンクをクリック

 

 

 

開いたら外部リンクというタブの設定を行います。

下の画像の①から④の部分を確認してください

外部リンクタブ説明(前半)

 

①設定を適用にチェックします。

 

②別の新しいウィンドウまたはタブを選択。

 

③nofollowを選択。

 

④rel属性はすべてチェックを入れます。

 

外部リンクタブの続きです。

以下の⑤から⑧を確認してください

外部リンクタブ後半説明

 

⑤アイコンの種類は画像を選びます。

 

⑥アイコンの画像を選びます。
※注意:この部分は⑤で画像を選択しないと表示されません。

 

⑦アイコンの位置を設定します。たいていの場合、右かと…

 

⑧チェックボックスにチェックしておきます。

 

最後に変更を保存を押してください。

 

これですべてのページの外部リンクの後ろにアイコンが付きます。

簡単ですよね♬

 

シェアボタンの後ろのアイコンを消す

実はこのままだとありとあらゆる部分の外部リンクにアイコンが付くので、こんな場所にも付いてしまいます。

 

シェアボタンアイコン追加

ブログランキングの後ろはともかく、まさかのTwitterやFacebookのシェアボタンの下までアイコンが付いてしまいます。

 

アフィリエイトのAmazonや楽天のボタンにも付いちゃった…
ぴよすけはしばらく気付かず恥ずかしい思いをしました…

次に、この部分だけ付けたくない!という設定を行います。

 

 

ダッシュボードの外部リンクから例外というタブをクリックします。

例外タブをクリック

 

 

 

設定するのは以下の①から③です。

例外タブ説明

 

①チェックを入れます。

 

②外部リンクから除外したいURLを入力します

(下で詳細を説明しています)

 

③外部リンクを内部リンクと扱うを選択

 

最後に変更を保存を押します。

 

外部リンクから除外したいURLの欄にはTwitterやLINEなどのURLを入れます。

シェアボタンのTwitter・Facebookや、アフィリエイトのAmazonや楽天も付けたくない場合は入力しましょう。

 

URLがわからない場合、いったんシェアボタンを押し、開いたページのアドレスの部分を入力します。

 

この部分の入力はhttpなどがなくてもtwitter.comなどで対応してくれます

複数ある場合、「,(コンマ)」で区切るか、改行して入力します。

(ぴよすけはわかりやすいように改行しました)

 

この入力が終わって保存すると消えています。

アイコン例外参考画像

参考までにtwitterとLINEだけ設定しなかった場合のサンプルです

 

 

スポンサーリンク

あっという間にすべての設定が完了

いかがでしたか?

プラグインが多いと重くなる…とはいえ、ひとつずつアイコンを付けていくのは大変な作業です。

このプラグインなら一瞬ですべての外部リンクにアイコンが付きますよ!

 

それでは、本日もよいブログライフを!

 

 

最後までお読みいただきありがとうございました。
↓↓↓クリックしていただくとぴよすけが泣いて喜びます。


人気ブログランキング

スポンサーリンク