WordPressでリンクアイコンを表示したい…FontAwesomeの使い方

本・アイコン|アフィリエイト主婦

本・アイコン|アフィリエイト主婦

アフィリエイトサイトの記事を書いていて、文章中にリンクテキストを入れることってありますよね。
でも、ただリンクを挿入するだけじゃ視認性が悪い。

そういえば、どこかのウェブサイトを見ているときに、リンクテキストの後ろにリンクアイコンがついていたような…?
リンクアイコンとは、四角の中から矢印が飛び出てるみたいな記号のことです。

コレ→アフィリエイト主婦の副収入実況ブログ

恐らく「アフィリエイト主婦の副収入実況ブログ」の後ろにリンクアイコンがついていると思います。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 私もこのアイコンをつけたい!!!![/say]

ということで、調べてみました。
紆余曲折ありましたが、なんとかつけられたのでご報告です!

リンクアイコンが表示される仕組み

そもそも、このリンクアイコンってどうやって表示されるんでしょうか???
調べてみたところ、どうやらウェブ上のフォントを読み込んでいるようです。

確かに、機種依存文字で表示することはできるかもしれませんが、環境によって表示されないのではどうしようもありませんからね。

その点、フォント自体をオンラインで使えるのであればそんなに良いことはありません。
[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] ていうか、そんなことできるんだ…[/say]

この記号フォント、「FontAwesome」というフォントなのですが、めっっっっちゃ使えます!!!!
しかもなんかかわいいんですよ。

あちこちでいろんな使い方ができそうです。
今のところ私はリンクアイコンと箇条書きのチェックアイコンに使っています。

どうやって使うの?導入方法解説

設定方法|アフィリエイト主婦

しくみはわかりましたが、どうやって自分のブログに反映させるのでしょうか。
わかってしまえば簡単なのですが、私は最初導入がうまくいかなくてやきもきしました…。

簡単にステップを書くとこうなります。

【1】<head>タグ内にフォントCSSを呼び出すコードを挿入する
【2】スタイルシートにフォント設定コードを追加する
【3】本文で【2】を呼び出す

以上です。
なんか超絶簡単そうに見えるんですが、ちょこっとコードを編集する知識は必要です。
でも簡単な設定なので、ここでひとつ覚えてしまった方がいいですね。ハイ。

【1】<head>タグ内にフォントCSSを呼び出すコードを挿入する

まず最初に、FontAwesomeのフォントCSSを読み込むコードを埋め込みます。
WordPressのメニューから「外観」→「テーマ編集」→「テーマヘッダー」を開きます。

ヘッダーのコードが表示されるので、<head>から</head>の間に次のコードを貼り付けてください。

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.10/css/all.css” integrity=”sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg” crossorigin=”anonymous”>

ちなみにこのコードは今現在の最新バージョンですが、今後バージョンアップする可能性もあります。
最新バージョンのコードは、FontAwesomeのページから取得してください。

<head>から</head>の間ならどこに貼り付けてもよいのですが、とりあえず<head>の真下に貼っておけばいいと思います。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] コードを貼り付けたら保存をして、次に進みましょう![/say]

【2】スタイルシートにフォント設定コードを追加する

次は、使用したい記号を決めます。
FontAwesomeのフォント一覧を開いてみましょう。

ずらーーーっとフォントが出てきますね。果てしなく出てきますね。
全部見てるときりがないので、検索しましょう。
今回は例としてリンクアイコンを表示させるので、検索窓に「link」と入力します。

すると、linkのタグが付いたフォント一覧が表示されますので、自分の表示したいリンクアイコンをクリックしてください。
今回は私の使っている「external-link-alt」を例にします。

「external-link-alt」のアイコンをクリックすると、アイコンページに飛びます。
アイコンページの左下にHTMLコードが表示されているので、とりあえずこれをコピーします。

FontAwesomeのコード取得|アフィリエイト主婦

FontAwesomeのコード取得|アフィリエイト主婦

WordPressの記事本文に貼り付けてプレビューしてみましょう。
アイコンが表示されていれば、ちゃんとフォントを呼び出す準備ができているということです。

さて、ここで終わっても全然OKです。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] でも、いちいち記号を呼び出すの、ちょっとめんどくないですか?[/say]

私はとてもものぐさなので、その都度このコードを張り付けるのが面倒だなぁと思いまして。
<a>タグの中に埋め込みたいと思いました。

そんなことできるのか???と不安になりましたが、できます。
できました。

どのようにするのかというと、先ほどコピーしたコードに指定されているクラスを自分のstyle.cssに貼り付けて独自のクラスとし、<a>タグにクラス指定する、という方法です。
ちょっとややこしいですね…。

まず、先ほどコピーしたコードはこれでした。

<i class=”fas fa-external-link-alt”></i>

このコードの「class」に指定されているクラスは「fas」と「fa-external-link-alt」です。

【1】で貼り付けた<link>タグに指定されていたcssを開いてみましょう。
https://use.fontawesome.com/releases/v5.0.10/css/all.css

ちょっと気持ち悪い画面が開きましたね。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 文字だらけで頭痛くなりそうです…[/say]

この中に、先ほど指定されていたクラス「fas」と「fa-external-link-alt」があります。
これを丁寧に拾うと、

.icon:after{
content:”\f35d”;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
display:inline-block;
font-style:normal;
font-variant:normal;
text-rendering:auto;
line-height:1;
font-family:’Font Awesome\ 5 Free’;
font-weight:900;
}

となります。
これを自分のstyle.cssに貼り付けるだけです。

style.cssは、WordPressのメニューから「外観」→「テーマ編集」→「スタイルシート」を開きます。
一番下に上記のコードを追加して保存してください。

ちなみに、.iconの後ろについている「:after」は、タグに囲われた要素の後ろに適用されるという意味なので、前にアイコンを表示したい場合は「:before」にすればOKです。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] ふう。長かったですね、では次![/say]

【3】本文で【2】を呼び出す

やっとここまで来ましたね。
では、新規記事投稿画面を開きましょう。

そこに次のように記述します。

<a href=”https://google.com” class=”icon”>テスト</a>

プレビューしてみてどうでしょうか?
アイコンが後ろについていればOK!完了です。
他のタグでも「class=”icon”」を付ければ同じようにアイコンが付きます。

ここでは「external-link-alt」のアイコンを呼び出しましたが、ほかのアイコンでも同じようにできます。
他のアイコンを使用したい場合は、先ほどstyle.cssに貼り付けたコードを少し改変しないといけません。

「content:”\f35d”」となっているところの、「f35d」の部分を変えればOKです。
ここに指定する文字コードはFontAwesomeのアイコンページに表示されています。

FontAwesomeの文字コード取得|アフィリエイト主婦FontAwesomeの文字コード取得|アフィリエイト主婦

FontAwesomeの文字コード取得|アフィリエイト主婦

この文字コードを貼り付けて保存してください。
このとき、「\」を削除しないように気を付けてくださいね。
削除すると呼び出しができなくなってしまいます。

アイコンが表示されない!私が陥った落とし穴

悩む│アフィリエイト主婦

様々なサイトを参考にしつつ準備を万端にして意気揚々と記事プレビューをしたものの、一向にアイコンが表示されない…という事態に陥りました。

何回やってもダメで、もうあきらめかけたところで原因が判明。
なんとそれは…。

CSSの「font-weight」の指定をしなかったから

という謎の原因でした。

これが、「font-weight:100;」でも「font-weight:500;」でもダメ。
「font-weight:900;」以上じゃないとダメでした。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] なんで????[/say]

理由は謎なのですが、もし表示されなくてお困りの方、「font-weight」を直してみてください。
直るかもしれません…。

FontAwesomeでアイコンをたくさん使おう!

ふう、ずいぶん長い記事になってしまいました。

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] ここまでお付き合い頂いた方、ありがとうございます。[/say]

せっかくこうして使えるようになった記号フォント。
ぜひ活用しましょう!