2分スポンサーリンクこんにちわ。LifestylecreateのToshiです。本日は、SANGOのテーマを使ってアイコンを動きのあるアニメーションにする方法についてご紹介します。以下のようなアイコンを動きをつけてちょっとだけインパクトあるアニメーションに変更する事ができます。動くアイコンガタガタ動くカミナリアイコン!ふわっと動くアイコン動くロケット!はい。いうわけで、実際にはサルカワさんのサイトを見ながら私も導入をしてみましたが、HTMLとかCSSをまったく触った事がない。いう方は、ちょっとカスタマイズが変になってしまう可能性があるので、ご注意ください。いう方であれば、設定は可能かと思います。fontawesomeWEBサイト運営者であれば、このサイトをしっている方は多いでしょう。無料でオシャレなアイコンを使うことができます。英語表記で、欲しいと思うアイコンを検索窓に打ち込もう。BOOKと入力するとズラーッと本にようなアイコンがでてきます。黒くカラーがついているのは無料で使う事ができますが、真っ白なアイコンは有料になっているようです。無料のアイコンだけでも十分に使うことが可能です。アイコンを選択してクリックすると、アイコンの上の方にコードがあるので、クリックするとコピーができるようになっています。fa-book"></i>こんな感じで好きなアイコンを選択するときは、ここからコードをクリックすると、コードをコピーする事ができます。このHTMLコードだけを、WordPressに設置してもアニメーションとしては動きません。黒い動きのない、アイコンになってしまうでしょう。このAwesomeというアイコンをアニメーションにさせるためには、あるコードをヘッダーPHPに設置しなければいけません。CSSにカラーを指定して、アイコンに色をつけてあげて、さらにHTMLコードでサイズやアイコンの変更をしなければいけません。やり方を一つ解説しておきます。rel="stylesheet">上のコードをヘッダーPHPの直前に貼り付けを行います。WordPress<管理画面<外観<テーマ編集<ヘッダーPHP<ヘッダー直前にコード貼り付けの手順です。CSSに指定のコードを設定する次にアイコンのカラーをCSSで指定してあげます。Toshiちょっと、よくわからないという方は、アイコンを好きなカラーを選択するためにはCSSに指定しなければいけない。おぼえておきましょう。gray}上のコードは、グレーのカラーを指定するためのもので、CSSに貼り付けします。HTMLコードで実際にアニメーションを実装!次にやる事は、HTMLコードを入力して、実際にアイコンがアニメーションとして動くのか確認してみましょう。fa-2x"></i>上のコードでは、アイコンはロケット、ふわっと動くアニメションの動き、カラーはグレー、サイズを選択しています。他にもいろんなアニメーションの動きやサイズ変更、アイコン選択などでいろんなバリエーションでサイトを表現できるかと思います。まとめ他にもいろんなアニメーションの動き方があるかと思います。自分のサイトでマッチするものは導入してみましょう。:FontAwesomeアイコンアニメーションWordPressで文章に囲み枠を作る方法!CSSをいじらずテキストエディタのみで作成する方法【コピペでOK】この記事を書いた人toshi日常生活で起きている事はすべてネタ!をモットーとしてWEBサイトを運営しています。私が調べた事、わからない事は、きっと誰かもわからないし困っている!そんな人向けに私が情報を伝える事で、誰かの役に立つであろうという思いでコンテンツを配信しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト前の記事Google日本語入力は、作業効率を上げるためのビジネスパーソ...次の記事ランディングページを簡単に作成できる『ペライチ』の特徴と使い方...メニューWordPressSEOblogAdobevlogプロフィールToshi日常生活はすべてネタをモットーにサイト運営しています。自分わからない事や調べた事を記事としてお伝えします。