Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
          

SANGOでアイコンのアニメーション機能を追加しよう!見出しや記事中にも使える!

こんばんは。
最近お出かけができていないのでどうしてもパソコン関係のネタが多くなってしまいます汗

みなさん、ブログ楽しんでますか^^
おそらくこの記事を読んでくれている方はブロガーの方でありかつ、例のアノ最強テーマ『SANGO』を利用している方もしくは!どんなことができるのかと購入を検討している方でしょう!

僕もついこの間、ハミングバードからSANGOに変えまして….カスタマイズに明け暮れていたのですが。
いやーいいですな。
サルワカさんがめちゃめちゃ丁寧にカスタマイズガイドの記事を更新してくれるし、大量のショートコードそして惚れ惚れするようなシンプルデザイン…..とまぁSANGOの使いやすさはまたのきかいにお話しするとして、

今回は、『SANGOにfont awesomeのアニメーション機能を追加する方法』

これについてさらっと書いていきたいと思いまする。
ここのとこがちょっとサルワカさんのカスタマイズガイドだけでは分かりにくいかなと思ったのでね。

こんな風な見出しを作りたい!簡単!

 

さて、wordpressの有料テーマ『SANGO』では、ちょっといじるだけで、上の見出しのようなアニメーション機能を加えることができます。

星の数ほどあるサイトの中で、動きがあるアイコンはそれほど多くは見かけないので印象的ですよね♪
なにより可愛いし記事中にだって使えます

手順を以下で説明します。
もう一度言いますが以下で説明するのはwordpressテーマ『SANGO』を利用している人向けです。
SANGO以外のテーマでfont awesomeのアニメーションの使い方は次回説明します!たぶん

 

STEP.1 以下のコードをheader.phpに貼り付け

 

難しくありません、コピペで終わります。
まずはこのコードをコピーしましょう。

FTPソフトもしくはお勧めはしませんが、ワードプレスのダッシュボードの外観➡︎テーマの編集➡︎編集するテーマを選択で子テーマから親テーマに変更➡︎header.phpを開く。でもできます。

header.phpの位置はこの辺です。

まーでも、ワードプレス上からコードをいじるのは自殺行為なので、面倒でもFTPソフトを使ってコードの追加することをおすすめします!

で、あとはheadタグ内の最後に貼り付ければいいだけ!

こうなります。

忘れずに変更の保存をしましょう。

 

STEP.2 以下のコードを元に、好きなアイコン、好きなアニメーションをつける

 

ドライブ風なアイコンなら

 星の点滅なら

 

こんな感じで、好みのアイコンをFontAwesomeから選び、fa-〇〇の部分をコピーして張り替えたり、好きなアニメーションを選んでfaa-〇〇の部分を変えたり、色コードから好きな色を選んで#〇〇のところを変えれば自分だけのアイコンとなりますね。

見出しにアニメーションアイコンをつけたいときは、h2タグやh3タグで囲ってあげればいいだけです。
ちなみにこの記事の一番上の見出しのコードはこんな感じです。

たったこれだけのショートコードで記事が華やかになって素敵ですね!

ぜひ自身のブログのいろんな場面でつかってみてください♪