テーマのレビュー

WING(AFFINGER5)の楽しい新機能、アニメーションの使い方を紹介します

WING(AFFINGER5)に、アニメーション機能が付きました。

このアニメーション機能でどんなことができるかというと、

・人の画像をふわふわ動かす
・文字の一部を震わせる
・爆弾のアイコンを点滅させる

というような楽しい演出ですね^^

こういうアニメーション機能があるのは、WordPressのテーマの中で、WINGが最初だと思います。

記事の中にちょっとしたアクセントを入れることによって、ブログを楽しく演出することができるようになりますよ。

今回は、アニメーションの設定の仕方を説明してみようと思います。

★WINGはこちらもどうぞ↓
WING(AFFINGER5)は、サイト作成が楽しくなる機能満載のテーマ>>

アニメーション機能の使い方

WINGのアニメーション効果は、WordPressの「投稿」から設定します。

いつもの記事を書くところで、「スタイル」を設定するとアニメーションさせることができます。

アニメーションの動作は、全部で16種類。

  • 45°揺れ
  • ベル揺れ
  • 横揺れ
  • 縦揺れ
  • 点滅
  • バウンド
  • 回転
  • ふわふわ
  • 大小
  • シェイク
  • シェイク(強)
  • 拡大(ゆれ)
  • 過ぎる
  • 戻る
  • バースト
  • 落ちる

これだけあれば、いろいろなシーンで使うことができますね^^

1.画像をアニメーション

画像をアニメーションさせる方法を説明していきます。

まずは、WordPressの「投稿」からエディタ画面を出します。(エディタ画面は、いつもの記事を書く画面です。)

WING画像アニメーション1

WordPressのエディタには、ビジュアルモードとテキストモードがありますが、

アニメーションの設定をするときには、ビジュアルモードにしておきます。

ビジュアルモードは、上の画像の右上にある「ビジュアル」をクリックしてください。

WING画像アニメーション2

ビジュアルモードにしたら、次に画像を挿入しましょう。

「メディアを追加」から、アニメーションさせたい画像を選んで、投稿に挿入します。

WING画像アニメーション3

画像が挿入されたら、大きさを変えておきます。

画像はドラッグで拡大・縮小ができるので、好みの大きさに変更します。

ドラッグしても縦横比は変わらないので安心ですよ。

また、上の画像のように、挿入する画像のサイズがリアルタイムで表示されるので、他のイラストと大きさを合わせるのも簡単です。

WING画像アニメーション4

さて、画像の大きさを調整したので、いよいよアニメーションを設定していきます。

上の方に「スタイル」という項目がありますよね。(もし無ければ、ビジュアルモードになっていない可能性があります。)

クリックすると、出てきたメニューの中に「アニメーション」という項目があります。

その中から、好きなアニメーションを選んでクリックします。

WING画像アニメーション5

アニメーションを選択すると、画像の左下に「動」という青色のマークが付きます。

このマークが付けば、アニメーションの設定は完了です。

WING画像アニメーション6

さっそく、プレビューで確認してみましょう。

先ほどの画像が、アニメーションしていると思います^^

2.文字をアニメーションさせる

先ほどは画像でしたが、今度は文字を動かしてみましょう。

上と同様の手順で設定することができます。

WING文字アニメーション1

ビジュアルモードで、何か文字を入力します。

ここでは、「黒目のパンダくん」にしてみました。

「黒目のパンダくん」を選択しておきます。

WING文字アニメーション2

画像の時と同様に、「スタイル」から「アニメーション」を選びましょう。

文字の場合は、選択した部分の文字がアニメーションします。

ただし、文字は読めないと意味が無いので、ちょっと震えるくらいのアニメーションで良いと思います。

使いどころが難しいのですが、アイデアしだいで面白いコンテンツができると思います。

3.FontAwesomeアイコンをアニメーション

FontAwesomeという文字アイコンもアニメーションさせることができます。

最初に「FontAwesome」が使えるように設定が必要ですが、実はWINGでは簡単に設定できるます。

FontAwesomeのアイコンは、見出しのアクセントとして使うとすごく良いですよ。

一度設定するだけでいいので、ぜひ挑戦してみましょう!

WINGでのFontAwesomeの設定方法

FontAwesomeの設定は、こちらのサイト様が分かりやすいです↓
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

FontAwesomeを使う方法には2通りありますが、「CDNを使う」方法が簡単です。

上のリンク先からCDNのコードをコピーしておきます。

FontAwesomeのコード

WordPressメニューから、「AFFINGER5 管理」→「その他」→「上級者向け」と進みます。

その中に「コードの出力」というところがあるので、先ほどのコードを貼り付けてください。(上の画像のようになります)

貼り付けたら、一番下に「保存」ボタンがあるので、忘れずにクリックしておきます。

これで、WINGでもFontAwesomeアイコンが使えるようになりました。

FontAwesomeをアニメーションさせる

では、アイコンをアニメーションさせてみましょう。

手順の流れは、

1 適当な文字を入力する
2 その文字にアニメーションを設定
3 文字をFontAwesomeのアイコンに変える

という感じが簡単だと思います。

WINGアイコンアニメーション1

まずはビジュアルモードにしておきます。

アイコンを表示させたいところに、適当に文字を書きます。

ここでは、「aaa」としてみました。

この「aaa」を選択しておき、先ほどと同様に、「スタイル」からアニメーションを設定します。

今回は、アニメーションは「点滅」にしてみました。

「aaa」の左に「動」というマークが付いていればOKです。

WINGアイコンアニメーション2

次に、テキストモードに切り替えます。

テキストモードにするときは、右上の「ビジュアル」の隣に「テキスト」っていうところがありますよね。

そこをクリックすれば、テキストモードになります。

テキストモードにすると、上の画像(赤枠の中)のような文字が表示されているはずです。

その中に、「aaa」という部分がありますよね。

そこをFontAwesomeのコードに置き換えます。

WINGアイコンアニメーション3

上の画像のように、「aaa」だった部分にFontAwesomeのコードに変えています。

今回は、爆弾のアイコンにしてみました。

上の画像の青色になっている部分が、爆弾アイコンになります。

<i class=”fas fa-bomb fa-5x”></i>  ←この部分

WINGアイコンアニメーション4

プレビューしてみると、上のようになります。

ちゃんと爆弾アイコンが表示されていて、点滅のアニメーションになっています。

アニメーション機能のまとめ

WINGのアニメーションは、画像・文字・アイコンを動かすことができます。

ちょっとしたアクセントとして使うケースが多いと思いますが、アイデアしだいで、いろいろな使い方ができそうです。

気を付けないといけないことは、アニメーションを多用しすぎないようにすることでしょう。

記事が見にくくなってしまったり、記事を読むのに気が散ってしまうようでは意味がありません。

あくまで引き立て役として使うのがベストだと思います。

例えば、見出しにFontAwesomeのアイコンを使って、それを揺らしたりするのは面白そうですよね^^

ちょっとしたことですが、かなりのインパクトになると思います。

なかなか面白い機能ですよ。

★アフィリエイト部門の3位にさせていただきました↓
2018年、WordPressテーマの部門別お勧めベスト3を発表!>>

WINGの詳細はこちら>>

AFFINGER PACK3は、WING強化版と2つの便利なプラグインをセットにした商品です。

AFFINGER PACK3の詳細はこちら>>

当サイト(上のボタン)から購入すると、【ブログアフィリエイト外注化 マニュアル・キット】が特典として付いてきます。

関連記事

  1. テーマプレス

    TCDの「BRIDGE」を購入しました。使用してみた感想など

  2. TCDのRUMBLE

    TCDの「RUMBLE」は、情報量が多いサイトに一押しの美しいテーマ

  3. TCDのZERO

    TCDの「ZERO」は、アイキャッチ不要で書くことに集中できるテーマ

  4. TCDのONE

    TCDの「ONE」は、魅力的なワンカラムと高機能CTA搭載のブログテー…

  5. TCDのBloom

    TCDの「Bloom」は女性向けブログに最適な美しいテーマ!

  6. Diverのテーマ

    アフィリエイト向けテーマ「Diver」の機能がすごいことになっている!…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON