前回は、WordpressでFont Awesome5を使えるように設定をしました。
別タグで開くリンクにこういう→アイコンを付けたい！ 実際に、このアイコンを表示する方法は、こちらです。 [sitecard subtitle=関連記事 url=https://lazylazylazy.com/show_newt[…]
今回は、本来やりたかった別タブや別ウィンドウで開くリンクに自動的にを付ける方法を説明します。
別タブ（別ウィンドウ）で開くリンクにアイコンを自動的につける方法
WordPressのバージョン
Worddpressのバージョンは、Ver5.4.1です。
この方法について、色々紹介されているサイトがあったのですが、Wordpressのバージョンが違うのか、タグの構成が変わっていて、詳細されているそのままでは、ちゃんと表示されませんでした。
設定方法
この方法では、CSSを追加することで、自動的にアイコンが表示されるようになります。
追加CSSの設定画面の表示手順
まず、【外観】→【カスタマイズ】をクリックします。
次に、メニューの下のほうにある【追加CSS】をクリックします。
追加CSS画面が表示されるので、下で紹介するCSSのコードを追加して、【公開】をクリックすると設定は完了です。
追加するCSS
追加するCSSは、以下の通りです。
.postContents p a[target="_blank"]:after {
content: "\f35d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 12px;
text-decoration: none;
margin: 0 3px;
}
編集欄に追加して、【公開】をクリックしてください。
設定後の別タブで開くリンクの表示
別タブで開くリンクを作ります。
リンクの挿入／編集ボタンをクリックします。
設定画面が表示されるので、「リンクを新しいタブで開く」をチェックして、【リンク追加】をクリックします。
という風に作ったリンクが下のリンクです。
リンクの横にアイコンが表示されており、リンクをクリックすると別タブで開きます。
こちらは、「リンクを新しいタブで開く」のチェックをしていないバージョンです。
アイコンが表示されておらず、クリックすると今のタブの中でリンク先が表示されます。
これで、完成です。