SANGOテーマでFontAwesomeのアイコンを動きあるアニメーションにする方法!

 

こんにちわ。LifestylecreateのToshiです。

本日は、SANGOのテーマを使ってアイコンを動きのあるアニメーションにする方法についてご紹介します。
以下のようなアイコンを動きをつけてちょっとだけインパクトあるアニメーションに変更する事ができます。

がたがた動くアイコン

    ガタガタ動くカミナリアイコン!

ふわっと動くアイコン

   動くロケット!

はい。というわけで、実際にはサルカワさんのサイトを見ながら私も導入をしてみましたが、HTMLとかCSSをまったく触った事がない。という方は、ちょっとカスタマイズが変になってしまう可能性があるので、ご注意ください。少しでも、触ったことある。という方であれば、設定は可能かと思います。

WEBアイコンはFont Awesomeを使おう!!

Font Awesome

⇒ fontawesome

WEBサイト運営者であれば、このサイトをしっている方は多いでしょう。
無料でオシャレなアイコンを使うことができます。

英語で入力

英語表記で、欲しいと思うアイコンを検索窓に打ち込もう。

例えば、BOOKと入力するとズラーッと本にようなアイコンがでてきます。

アイコンが表示

もちろん、無料で活用できます。
黒くカラーがついているのは無料で使う事ができますが、真っ白なアイコンは有料になっているようです。

無料のアイコンだけでも十分に使うことが可能です。

 アイコンを選択してクリックすると、アイコンの上の方にコードがあるので、クリックするとコピーができるようになっています。

BOOKのアイコン

コード
<i class="fas fa-book"></i>

こんな感じで好きなアイコンを選択するときは、ここからコードをクリックすると、コードをコピーする事ができます。

ただ、このHTMLコードだけを、WordPressに設置してもアニメーションとしては動きません。
黒い動きのない、アイコンになってしまうでしょう。

このAwesomeというアイコンをアニメーションにさせるためには、あるコードをヘッダーPHPに設置しなければいけません。
そして、CSSにカラーを指定して、アイコンに色をつけてあげて、さらにHTMLコードでサイズやアイコンの変更をしなければいけません。

ちょっと、やり方を一つ解説しておきます。

アイコンをアニメーション化する手順について

ヘッダーPHPにコードを入力する

コード
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

上のコードをヘッダーPHPの直前に貼り付けを行います。

WordPress<管理画面<外観<テーマ編集<ヘッダーPHP<ヘッダー直前にコード貼り付けの手順です。

CSSに指定のコードを設定する

次にアイコンのカラーをCSSで指定してあげます。

Toshi

ちょっと、よくわからないという方は、アイコンを好きなカラーを選択するためにはCSSに指定しなければいけない。とおぼえておきましょう。
コード
.my-gray {color: gray}

上のコードは、グレーのカラーを指定するためのもので、CSSに貼り付けします。

HTMLコードで実際にアニメーションを実装!

次にやる事は、HTMLコードを入力して、実際にアイコンがアニメーションとして動くのか確認してみましょう。

コード
<i class="fas fa-rocket faa-tada animated my-gray fa-2x"></i>

上のコードでは、アイコンはロケット、ふわっと動くアニメションの動き、カラーはグレー、サイズを選択しています。

他にもいろんなアニメーションの動きやサイズ変更、アイコン選択などでいろんなバリエーションでサイトを表現できるかと思います。

まとめ

他にもいろんなアニメーションの動き方があるかと思います。自分のサイトでマッチするものは導入してみましょう。私も別のサイトでいろいろなアイコンを使って動かしてみます(笑)

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です