起業女性の仲間作りコミュニティ 入会募集中!

ワードプレスのブログ投稿の記事内の外部リンクにマーク(アイコン)を付けたい

「ブログを読んでくださる読者さんに”これは別のサイトへジャンプするリンクです”と、わかりやすくしたい!リンクのアイコンを付けたい!」

というご質問をいただきました。

このようなアイコンですね。

 

リンクには、クリック(タップ)したら新しい画面が開いてジャンプ先のページが出てくるタイプと、新しい画面は開かずにページが変わるタイプがあります。

よくある使い分けとしては、自分のウェブサイト内へのリンクの場合、新しい画面は開かせずにページを変え、自分じゃない他のウェブサイトへのリンクの場合、新しい画面で開くようにしているものが多いです。

そして、新しい画面が開くリンクの場合に、上の画像のようなアイコンを付けることが多いです。

 

では、さっそくリンクアイコンの付け方にいきましょう!

ここでは、ブログマーケッターのジュンイチさんが制作されているWordPressテーマ「SEAL ver.1.5」「ELEPHANT3」の画面で説明します。

あまりワードプレスの設定画面を触りたくない方は1の手動で挿入、投稿時の手間を省きたい方は2の自動で挿入の方法をお試しください。

投稿でリンクを設定するたびに自分で入力する方法(手動で挿入)

ワードプレスの投稿画面以外の画面はあまり触りたくない方で、外部へのリンクの数もあまり多くない方は、この方法でもめんどうではないと思います。

まず、投稿画面でリンクの設定をします。リンクの設定の仕方は知ってるよ~という方は、(4)~(5)だけご覧ください。

 

(1)リンクしたい文章を選択して、「リンクの挿入/編集」ボタンを押してください。

 

(2)ジャンプ先のサイトのURL(アドレス)を入力し、歯車マークの「リンク設定」ボタンを押します。

 

(3)「リンクを新しいタブで開く」にチェックを入れて、更新ボタンを押します。これでリンクの設定はできました。

 

(4)次に、投稿画面の右上の「テキスト」タブをクリックします。

 

(5)リンクする文章と、そのあとの</a>の間に下記の文章を入れます。

【挿入する文章】

HTML
<i class="fas fa-external-link-alt"></i>

 

 

これで通常通り、投稿を公開して終了です。

1~4まではいつもやっているリンクの設定なので、追加する作業は5だけですね。

挿入する文章を毎回コピペするのは・・・という場合は、プラグインのAddQuicktagに登録しておくことをお勧めします。

登録の仕方は、最後におまけコーナーでご説明します。

 

外部へのリンクを設定したら、自動でアイコンが付く方法(自動で挿入)

投稿画面以外の画面を触ることに抵抗がない方は、こちらの方法をお試しください^^

 

(1)ワードプレスにログインしたら、「外観」メニューの「カスタマイズ」をクリックしてください。

 

(2)さらに左のメニューから、「追加CSS」をクリックします。

 

(3)下記をここにコピペして、「公開」ボタンを押します。

【挿入する文章】

CSS
/** 外部リンクにマークを付ける **/
a[target="_blank"]::after{
	font-family: "Font Awesome 5 Free";
	content: "\f35d";
	margin: 0 3px;
	font-weight: 900;
}

 

 

これを1度設定したら、投稿のたびに文章を挿入しなくて大丈夫です。

「投稿でリンクを設定するたびに自分で入力する方法」の1~4で設定したリンクに自動的にアイコンが挿入されます。

 

おまけ(手動の際、Add Quicktagを使う方法)

1の「投稿でリンクを設定するたびに自分で入力する方法(手動で挿入)」の場合、挿入する文章をどこかに保存しておく必要があって、それをいちいち開くのが面倒だと感じる方もいますよね。

その場合は、プラグインのAddQuicktagに登録してしまいましょう!(プラグインは既に入れている前提です)

 

(1)ワードプレスにログインしたら、「設定」メニューから「AddQuicktag」をクリックします。

 

(2)まだ何も設定されていない行まで画面をスクロールします。設定するのは、「ボタン名」「開始タグ」と右側のチェックボックスです。

■ ボタン名に、わかりやすいボタン名(例えば「リンクアイコン」など)を入力します。

■ 開始タグに、下記の文章を入力します。

【入力する文章】

HTML
<i class="fas fa-external-link-alt"></i>

■ チェックボックスは、左から4つにチェックを入れ、2つ飛ばして、3つチェックを入れます。

そして、「変更を保存」ボタンを押してください。

 

この設定をした後で、投稿画面を開くと、AddQuicktagに設定した項目が追加されています。

文章の挿入したい箇所にカーソルを持っていき、Quicktagsのプルダウンをクリックします。

設定した「リンクアイコン」をクリックすると、設定した文章が挿入されます。

すると、ビジュアル投稿画面では何も変わらないように見えますが、テキスト画面では、ちゃんと挿入されていることが分かります。

 

ただ、AddQuicktagに追加の設定をするのであれば、2の「外部へのリンクを設定したら、自動でアイコンが付く方法」でも、それほど難しくはないので、そちらでもいいのかな、と思います。

設定しやすい方法をご利用くださいね^^