
リンクにアイコンをつけてオシャレにしたい!
こういうやつですね。
サイトを回って見ているうちにそう思った人も多いでしょう。
テーマの『cocoon』には、このリンクアイコンを表示する機能が搭載されています。
その設定方法を紹介します。
外部リンク・内部リンクの設定
リンクのアイコンは『外部リンク』『内部リンク』で別々に設定することができます。
まずは『cocoon設定』⇨『本文』と移動します。
下にスクロールしていくと『外部リンクの設定』『内部リンクの設定』があります。
各設定の下部に『アイコン表示』『アイコン』があります。
『アイコン表示』にチェックを入れ、表示したい『アイコンフォント』を選択します。
最後に『設定を保存』で設定は完了です。
設定ができていれば以上のようになります。
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」
コードの貼り付けが完了したら、『ファイルを更新』します。
以上でリンクアイコンを表示するための設定は完了です。
リンクアイコンの設定の説明は以上です。おつかれさまでした。
まとめ
今回は、リンクの後ろにリンクアイコンを表示する手順をご紹介しました。
リンクアイコンが表示されることで読者には『これはリンクだ』と視覚的に分かるためユーザビリティが向上します。ぜひ使ってください。
コメント