「ブログを読んでくださる読者さんに”これは別のサイトへジャンプするリンクです”と、わかりやすくしたい!リンクのアイコンを付けたい!」
というご質問をいただきました。
このようなアイコンですね。
リンクには、クリック(タップ)したら新しい画面が開いてジャンプ先のページが出てくるタイプと、新しい画面は開かずにページが変わるタイプがあります。
よくある使い分けとしては、自分のウェブサイト内へのリンクの場合、新しい画面は開かせずにページを変え、自分じゃない他のウェブサイトへのリンクの場合、新しい画面で開くようにしているものが多いです。
そして、新しい画面が開くリンクの場合に、上の画像のようなアイコンを付けることが多いです。
では、さっそくリンクアイコンの付け方にいきましょう!
ここでは、ブログマーケッターのジュンイチさんが制作されているWordPressテーマ「SEAL ver.1.5」「ELEPHANT3」の画面で説明します。
あまりワードプレスの設定画面を触りたくない方は1の手動で挿入、投稿時の手間を省きたい方は2の自動で挿入の方法をお試しください。
投稿でリンクを設定するたびに自分で入力する方法(手動で挿入)
ワードプレスの投稿画面以外の画面はあまり触りたくない方で、外部へのリンクの数もあまり多くない方は、この方法でもめんどうではないと思います。
まず、投稿画面でリンクの設定をします。リンクの設定の仕方は知ってるよ~という方は、(4)~(5)だけご覧ください。
(1)リンクしたい文章を選択して、「リンクの挿入/編集」ボタンを押してください。
(2)ジャンプ先のサイトのURL(アドレス)を入力し、歯車マークの「リンク設定」ボタンを押します。
(3)「リンクを新しいタブで開く」にチェックを入れて、更新ボタンを押します。これでリンクの設定はできました。
(4)次に、投稿画面の右上の「テキスト」タブをクリックします。
(5)リンクする文章と、そのあとの</a>の間に下記の文章を入れます。
【挿入する文章】
<i class="fas fa-external-link-alt"></i>
これで通常通り、投稿を公開して終了です。
1~4まではいつもやっているリンクの設定なので、追加する作業は5だけですね。
挿入する文章を毎回コピペするのは・・・という場合は、プラグインのAddQuicktagに登録しておくことをお勧めします。
登録の仕方は、最後におまけコーナーでご説明します。
外部へのリンクを設定したら、自動でアイコンが付く方法(自動で挿入)
投稿画面以外の画面を触ることに抵抗がない方は、こちらの方法をお試しください^^
(1)ワードプレスにログインしたら、「外観」メニューの「カスタマイズ」をクリックしてください。
(2)さらに左のメニューから、「追加CSS」をクリックします。
(3)下記をここにコピペして、「公開」ボタンを押します。
【挿入する文章】
/** 外部リンクにマークを付ける **/
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)まだ何も設定されていない行まで画面をスクロールします。設定するのは、「ボタン名」「開始タグ」と右側のチェックボックスです。
■ ボタン名に、わかりやすいボタン名(例えば「リンクアイコン」など)を入力します。
■ 開始タグに、下記の文章を入力します。
【入力する文章】
<i class="fas fa-external-link-alt"></i>
■ チェックボックスは、左から4つにチェックを入れ、2つ飛ばして、3つチェックを入れます。
そして、「変更を保存」ボタンを押してください。
この設定をした後で、投稿画面を開くと、AddQuicktagに設定した項目が追加されています。
文章の挿入したい箇所にカーソルを持っていき、Quicktagsのプルダウンをクリックします。
設定した「リンクアイコン」をクリックすると、設定した文章が挿入されます。
すると、ビジュアル投稿画面では何も変わらないように見えますが、テキスト画面では、ちゃんと挿入されていることが分かります。
ただ、AddQuicktagに追加の設定をするのであれば、2の「外部へのリンクを設定したら、自動でアイコンが付く方法」でも、それほど難しくはないので、そちらでもいいのかな、と思います。
設定しやすい方法をご利用くださいね^^