Simplicity2で新しくなったFont Awesomeを使おう!

WordPressでブログやサイトを経営している人の中には、カスタマイズがしやすいSimplicity2をテーマにしている人は多いのではないでしょうか?

当サイトでもSimplicity2を使用しています。

カスタマイズする上で、個性を出すためにはアイコンを使うと効果的になります。例えば、

チェックポイント!

としたり、

注意点

とすることで、より見やすく、完成度が高くなります。

今回は、初心者の方でも簡単に使えるよう、2017年末に新しくなったFont Awesomeの使い方を紹介します。

新しくなったFont Awesomeについて

今回紹介するのは、2017年末にリリースされたFont Awesome 5です。

以前のFont Awesomeについての使い方は以下の記事を見てください。

私も使っている無料Wordpressテーマ「Simplicity2」 シンプルで自分らしくカスタマイズ可能のため、多くの方が使...

Font Awesome 5では約2500種類のアイコンが用意されています。そのうち、約950種類が無料で使用することができます。

すべての種類を使いたい方はProモード($60…約6300円)に登録することで使用することができるようになります。

Font Awesomeのサイトは以下を参照してください。

Font Awesomeの導入方法

それでは、実際にFont Awesomeを使えるようにしましょう。

以下のコードをheader.phpの<head>…</head>に挿入してください。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

上のコードはFont Awesome 5を使えるようにするためのもので、下のものが後述するアニメーション機能を使えるようにするコードです。

Simplicity2では、外観→テーマの編集→header.php で編集してください。

子テーマを使っている方は、外観→テーマの編集→header-insert.php でも出来るかもしれませんが、もし出来なかった場合は直接FTPソフトなどを用いて、親テーマのheader.phpを編集してください。

FTPソフトについて分からない方がいらっしゃいましたら、以下のサイトで詳しく解説されていますので参考にしてみてください。

「FTPソフトとは何?」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。初心者の方向け。
スポンサーリンク

実際にFont Awesome 5を使ってみよう

それでは実際にFont Awesomeを使いましょう。

1.まずFont Awesome公式サイトへ行き、使いたいアイコンを選びます。

①のところにチェックを入れると無料で使えるアイコンのみが表示されます。

②のように薄い色のアイコンは有料のものなので、通常は使えません。①のようにFreeにチェックを入れて表示しないようにしておいて結構だと思います。

③の部分は検索欄です。英語のみですが、キーワードの英単語を入れれば使いたいアイコンの候補が出てきます。

④以下の部分はカテゴリー名が並んでいます。チェックすることである程度候補が絞られます。

2.使いたいアイコンが見つかったらコードをコピーします。

矢印の先のをクリックするとコピーができます。

3.WordPressなどの編集画面でコードを貼り付けましょう。WordPressの場合は「ビジュアル」ではなく「テキスト」の方で編集してください。

注意点
Simplicity2を使用している場合、「テキスト」で編集するとしっかりコードが書かれているのに、「ビジュアル」にするとアイコンが表示されなかったり、□となっている場合があります。
この場合焦るかもしれませんが、記事を公開してWeb上で見るときにはしっかりと表示されるので心配しないでください。
もし公開した記事にもアイコンが表示されなかった場合は、しっかりと、Font Awesomeを使えるようにするコードがheader.phpの中に書かれているか確認してみてください。

様々なカスタマイズの仕方

Font AwesomeではHTMLのクラスの中を書き加えることで様々なカスタマイズをすることができます。

以下でそれらを紹介します。

アイコンの余白調整

Font Awesomeのサイト上でコピーしたコードをそのまま貼り付けると、アイコンによって左右の余白が異なるため、以下のようにズレが生じます。

HTMLコード

<i class="fab fa-line fa-2x"></i>LINE
<i class="fab fa-twitter fa-2x"></i>Twitter
LINE
Twitter

これを直すにはfa-fwというのを付け足します。すると、

HTMLコード

<i class="fab fa-line fa-2x fa-fw"></i>LINE
<i class="fab fa-twitter fa-2x fa-fw"></i>Twitter
LINE
Twitter

のように文字の始まり位置が揃い、アイコンの余白が調整されたことがわかります。
このfa-fwはほとんどの場合で用いるのが良いでしょう。スペースで調整するよりも簡単に余白を合わせることができます。

アイコンのサイズ変更

<h1>や<h2>などの見出し部分でアイコンを使うときは自動的にサイズが変更されますが、任意の場所でアイコンサイズを大きくしたいと思ったときは以下の方法でサイズを変更しましょう。

HTMLコード

<i class="fas fa-car"></i>通常サイズ
<i class="fas fa-car fa-4x"></i>4倍のサイズ
通常サイズ
4倍のサイズ

他にも次のように変更できます。

倍 率 Class名 出力例
通常
1.3倍 fa-lg
2倍 fa-2x
3倍 fa-3x
4倍 fa-4x
5倍 fa-5x
6倍 fa-6x
7倍 fa-7x
8倍 fa-8x
9倍 fa-9x
10倍 fa-10x

アイコンの色を変える

CSSでも変更できますがHTMLだけでもアイコンの色を変えることができます。style=”color:◯◯”の◯◯の中に英語でredwhiteと色を入れてもいいですし、16進法の色コードを指定しても構いません。

HTMLコード

<i class="fab fa-twitter" style="color:#059ff5"></i>
<i class="fab fa-line" style="color:#01c101"></i>
<i class="fab fa-facebook-square" style="color:#3c5898"></i>


アイコンの向きを変える、反転させる

もともとあるアイコンの向きを変えたいときは以下のようにします。

HTMLコード

<i class="fas fa-circle-notch fa-fw"></i>通常
<i class="fas fa-circle-notch fa-fw fa-rotate-90"></i>90度回転
通常
90度回転

「90」のところを180や270に変更すればそれぞれの角度回転します。

また、左右反転や上下反転は次のように指定します。

HTMLコード

<i class="fas fa-bullhorn fa-fw"></i>通常
<i class="fas fa-bullhorn fa-fw fa-flip-horizontal"></i>左右反転
<i class="fas fa-bullhorn fa-fw fa-flip-vertical"></i>上下反転
通常
左右反転
上下反転

アニメーションをつける

Font Awesomeでは多くのアニメーションを加えることができます。状況に応じて加えてみてください。

HTMLコード

<i class="fas fa-bomb fa-fw"></i>通常
<i class="fas fa-bomb fa-fw faa-burst animated"></i>爆発
通常
爆発

以下が使えるエフェクトです。

Class名 出力例
faa-wrench animated
faa-tada animated
faa-horizontal animated
faa-vertical animated
faa-ring animated
faa-flash animated
faa-bounce animated
faa-spin animated
faa-float animated
faa-pulse animated
faa-burst animated
faa-shake animated
faa-passing animated
faa-passing-reverse animated

アイコンを重ねる

2つのアイコンを重ねることもできます。まず、fa-stackspanのclassに指定します。アイコンの大きい方をfa-stack-2x、小さい方をfa-stack-1xとします。

具体例は以下を見てみましょう。

HTMLコード

<span class="fa-stack fa-2x">
<i class="fas fa-certificate fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x" style="color:white"></i>
</span>

まとめ

いかがでしたか。

様々な効果を加えることができるのがお分かりいただけたと思います。

これらを駆使してぜひ、自分らしいWebページを作ってみてください。 

スポンサーリンク
レクタングル大広告
レクタングル大広告

シェアする

フォローする

スポンサーリンク
レクタングル大広告