【cocoon】リンクにアイコンを表示させる方法 │WordPress

リンクにアイコンをつけてオシャレにしたい！

こういうやつですね。
サイトを回って見ているうちにそう思った人も多いでしょう。

テーマの『cocoon』には、このリンクアイコンを表示する機能が搭載されています。
その設定方法を紹介します。

外部リンク・内部リンクの設定

リンクのアイコンは『外部リンク』『内部リンク』で別々に設定することができます。

まずは『cocoon設定』⇨『本文』と移動します。

下にスクロールしていくと『外部リンクの設定』『内部リンクの設定』があります。
各設定の下部に『アイコン表示』『アイコン』があります。

『アイコン表示』にチェックを入れ、表示したい『アイコンフォント』を選択します。

最後に『設定を保存』で設定は完了です。

設定ができていれば以上のようになります。

cocoon以外でリンクアイコンを表示させる方法

1.Fontawesomeを使えるようにする

まずはFontawesomeをブログで使えるように有効化します。

ヘッドタグ内に以下のコードをコピペします。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">

貼り付ける場所はブログサービスによって異なります。

2.リンクにアイコンを自動で追加するCSS

次にスタイルシートにアイコンを表示するためのCSSをコピペします。

/*Font Awesome*/
/*リンクの最後にアイコン自動追加(blank用)*/
.entry-content a[target="_blank"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
font-size: 0.9em;
margin: 0px 3px;
font-weight: 900;
}

上記のコードを以下の場所に貼り付けます。

場所：「ダッシュボード」⇨「外観」⇨「テーマエディター」⇨「style.css」

コードの貼り付けが完了したら、『ファイルを更新』します。

以上でリンクアイコンを表示するための設定は完了です。

リンクアイコンの設定の説明は以上です。おつかれさまでした。

まとめ

今回は、リンクの後ろにリンクアイコンを表示する手順をご紹介しました。
リンクアイコンが表示されることで読者には『これはリンクだ』と視覚的に分かるためユーザビリティが向上します。ぜひ使ってください。