どうも。カエルブロガーのケロ蔵です。
文章を目立たせたいけれど、点滅させるにはどうすればいいんだろうと考えたことはありませんか？
ブログの記事って静的な物が多く、動的な記事ってほとんど見かけません。
なぜなら文字を点滅や横にスライドさせるだけでもHTMLの知識が必要だからです。
そんなことまでしてアニメーションをつける必要性もないだろうという事で、記事に動きがないものが多いんです。
それでもなんとか動きをつけたいですよね。
実はWINGのテーマでは初心者でも簡単に文字やアイコンにアニメーションを設定出来るというのをご存じでしたか？
例えばこのようなアニメーションを設定できます。
文字点滅
右から左にスライド
このようなアニメーション程度であればWINGの機能を使って誰でも簡単に設定することが出来るようになります。
アニメーションを設定するメリットとは？
今までアニメーションを付けてないから別に必要ないじゃんと思った人もいるかもしれません。
確かに絶対に必要なアクションではなく、ちょっとした遊び心として使うようなものです。
それでも文章に動きを付けることによって、読者からするとこういうギミックがあったら見てしまいますよね？
そういうところの近くにポイントや重要な内容を置いておけば、内容が気になって読んでくれるかもしれません。
文章にアニメーションは付けない方がいい！？
アニメーションの効果的な使い方を解説しましたが、僕個人としては文字の点滅と横にスライド以外は使っていません。
今のところ、それ以外の効果的な使い方が見出せないからです。
ただしアイコンに関しては使いどころが非常に多いので、今でもそれなりに使っています。
わかりやすくするために冒頭では文字に対して使いましたが、他にもアイコンにも同様に設定することができます。
アイコンを点滅させて目立たせることができます。
ポイント
見出しのアイコンにもこのようにアニメーションにすることができますよ。
このようにアイコンを動かせば、記事を読んでいる読者の目に触れやすくなるので、注目度がアップしますよ。
アニメーションの設置しすぎに注意
文字や動画が動いていると記事全体が賑やかになってきますが、あまり使いすぎてしまうとなんだか落ち着かない印象を受けてしまいます。
特にじっくり読みたいのに文字が動いていたりすると、せっかく興味を持って読んでくれようとしているのに、大きなストレスにもなりかねません。
そうならないようにあまりアニメーションを設置しすぎず、適材適所に設定しておくのが上手な使い方です。
WINGで使えるアニメーション一覧
45°揺れ
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク（強）
拡大（ゆれ）
過ぎる
戻る
バースト
落ちる
アニメーションの設置方法
ここからは実際にWINGを購入後、どうやって設定すればいいのか紹介していきます。
アニメーションの設定方法は大きく分けて２つです。
ポイント
- 『スタイル』を使って設定
- 『タグ』を使って設定
どちらもアニメーションの種類に違いはありません。
スタイルで使うのは文字や画像で動かしたいときに使います。
『動』というアイコンが頭にマークされるので、これが表示されたらアニメーションとして動かせます。
タグの方はアイコンを動かしたいときに使います。
タグで選択すると『 faa-float animated』といったようなコードが追加されます。
これはふわふわのアニメーションで、アイコンタグの後に入れるだけで簡単にアイコンを動かせるんです。
文字を右から左に流れるように設定する方法
文字を流れるように動かしたい場合は、はじめに対象の文字を選択し『タグ』→『テキストパーツ』→『流れる文字(marquee風)』の順に選択してください。
ビジュアルモードでは見た目に変化がありませんが、テキストモードにしてみるとタグが設置されています。
あとはプレビューで実際にスライドしている確認してみてください。
動的なブログを運営するなら使わない手はない
アニメーションの設定方法について紹介してきました。
静的なブログが多い中、ちょっとしたアニメーションを入れることによって読者も見てくれることがあるので結構効果的です。
プラグインを有効化しないと難しいんですが、WINGではテーマの機能だけで使うことが出来るので自分のブログにアニメーションを使いたいという方であればオススメできるワードプレステーマだと思います。
