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

top

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

icon

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

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

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

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

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

setting

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

icon-setting

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

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

out-in

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

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

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

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

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

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

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

貼り付け場所

WordPress:「ダッシュボード」⇨「外観」⇨「テーマエディター」⇨右側のバーの「header.php」
はてなブログ:「設定」⇨「詳細設定」⇨「headに要素を追加」の枠内にコードを貼付け
Livedoorブログ:「ブログ設定」⇨「PC」⇨「カスタマイズ」⇨「HTMLファイル」
FC2ブログ:「設定」⇨「テンプレートの設定」⇨「◯◯のHTML編集」
Blogger:「テンプレート」⇨「HTMLの編集」

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

codepaste

stylesheet

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

update

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

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

まとめ

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

 

コメント

タイトルとURLをコピーしました