AFFINGER5

【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

更新日:

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。

こんにちは。WordPressテーマ研究家SHINです。

 

AFFINGER5には、簡単にアニメーションできる機能が実装されていて、なんとデフォルトで・・・

\\ 16種類揃っています // d(‘ェ’*)グッジョブ!!

アニメーション16種類

●45°揺れ ●ベル揺れ ●横揺れ

●縦揺れ ●点滅 ●バウンド

●回転 ●ふわふわ ●大小

●シェイク ●シェイク(強)

●拡大(ゆれ) ●過ぎる ●戻る

●バースト ●落ちる

 

アニメーションは表現豊かでPOPに仕上がるし、テキストだけでも読者を楽しませる要素やアクセントにもなります。

今回は「テキスト(文字)」「アイコンフォント」「画像」の3種類を、16種類のアニメーションにできる機能と使い方を解説していきます。

ぜひ活用してみてください♪

 

テキストをアニメーションにする

まずはテキストのアニメーションにしてみましょう。と言っても簡単2ステップです♪

 

step
1
WordPressの投稿画面を「ビジュアル」モードにし、アニメーションしたいテキスト(文字)をドラッグします。

alt=AFFINGER5アニメーション

 

step
2
次に「スタイル」>「アニメーション」で、好みのアニメーションを選択するだけでOK!

alt=AFFINGER5アニメーション1

 

step
3
下のように、投稿画面でテキストに「動」というマークが表示されたらOK。「プレビュー」で確認してみましょう。

alt=AFFINGER5アニメーション2

 

アイコンフォントをアニメーションにする

続いてアイコンフォントも簡単にアニメーション化できます。

そこで、僕がおすすめするフリー素材のアイコンフォントサイトは「fontawesome v4.7」です。欲しいアイコンはほぼ揃います♪

fontawesome v4.7

 

step
1
「fontawesome v4.7」にアクセスして、アニメーションにしたいアイコンフォントを選びましょう。

alt=fontawesome v4.7,使い方

 

step
2
好きなアイコンフォントを選んだら、そのアイコンをクリックして「HTMLコード」をコピーしておきましょう。

alt=1fontawesomev4.7,使い方

 

step
3
WordPress投稿画面「テキスト」に、コピーしたHTMLコードを貼り付けます。これだけでアイコンフォントが表示されるので、プレビューで確認してみましょう。

alt=fontawesomev4.7,使い方

 

step
4
アイコンフォントのHTMLコードに、アニメーションにするコードを追加します。16種類のアニメーションコードを一覧してみましたので、コピペで使ってください♪(表示しているアイコンサイズは「ラージ」に変更しています)

45°揺れ

<i class="fa-wordpress fa faa-wrench animated st-animate fa-lg" aria-hidden="true"></i>

ベル揺れ

<i class="fa-wordpress fa faa-ring animated st-animate fa-lg" aria-hidden="true"></i>

横揺れ

<i class="fa-wordpress fa faa-horizontal animated st-animate fa-lg" aria-hidden="true"></i>

縦揺れ

<i class="fa-wordpress fa faa-vertical animated st-animate fa-lg" aria-hidden="true"></i>

点滅

<i class="fa-wordpress fa faa-flash animated st-animate fa-lg" aria-hidden="true"></i>

バウンド

<i class="fa-wordpress fa faa-bounce animated st-animate fa-lg" aria-hidden="true"></i>

回転

<i class="fa-wordpress fa faa-spin animated st-animate fa-lg" aria-hidden="true"></i>

ふわふわ

<i class="fa-wordpress fa faa-float animated st-animate fa-lg" aria-hidden="true"></i>

大小

<i class="fa-wordpress fa faa-pulse animated st-animate fa-lg" aria-hidden="true"></i>

シェイク

<i class="fa-wordpress fa faa-shake animated st-animate fa-lg" aria-hidden="true"></i>

シェイク(強)

<i class="fa-wordpress st-shake st-animate fa-lg" aria-hidden="true"></i>

拡大(ゆれ)

<i class="fa-wordpress fa faa-tada animated st-animate fa-lg" aria-hidden="true"></i>

過ぎる

<i class="fa-wordpress fa faa-passing animated st-animate fa-lg" aria-hidden="true"></i>

戻る

<i class="fa-wordpress faa-passing-reverse animated st-animate fa-lg" aria-hidden="true"></i>

バースト

<i class="fa-wordpress fa faa-burst animated st-animate fa-lg" aria-hidden="true"></i>

落ちる

<i class="fa-wordpress fa faa-falling animated st-animate fa-lg" aria-hidden="true"></i>

以上16種類のアニメーションでした♪

でもどうせなら・・・「アイコンサイズが小さい!」「アイコンの色も変えたい!」って方いますよね!もちろんご紹介します。

 

step
5
アイコンサイズとアイコンカラーを変える場合、基本のHTMLコードに以下のコードを追加するだけです♪

アイコンサイズ変更

<i class="fa fa-wordpress faa-wrench animated fa-lg" aria-hidden="true"></i>

<i class="fa fa-wordpress faa-wrench animated fa-2x" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-3x" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-4x" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-5x" aria-hidden="true"></i>

SHIN
アニメーションにするコードの後に、半角スペースで赤字のコードを追記するだけなので簡単ですよね♪

 

アイコンカラー変更

<i class="fa fa-wordpress faa-wrench animated fa-lg" style="color:red;" aria-hidden="true"></i>

<i class="fa fa-wordpress faa-wrench animated fa-lg" style="color:red;" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-lg" style="color:blue;" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-lg" style="color:orange;" aria-hidden="true"></i>
<i class="fa fa-wordpress faa-wrench animated fa-lg" style="color:green;" aria-hidden="true"></i>

SHIN
スタンダードカラーしか試していませんけど、styleで整えてカラーの英字を追記するだけで変わります♪

 

画像をアニメーションにする

次に画像をアニメーションしてみましょう♪

アイコンフォントのようにHTMLコード書き込む必要がないので、テキストをアニメーションするように簡単に設定できます。

 

step
1
WordPress投稿本文に、「メディアを追加」もしくは「保存済みのメディア」から画像を挿入しましょう。

alt=画像をアニメーション

 

step
2
画像を挿入したら、クリックした状態でスタイルにある「アニメーション」の中から好きなアニメーションを選択するだけです♪

alt=画像をアニメーション1

すると・・・

しん2

となります♪インパクトあり&見ていて楽しい装飾ですよね!

ただし!"表示速度"を考えなくてはならないので、あまり多様に使うのは注意していきましょう。

 

まとめ

AFFINGER5のテキスト(文字)・アイコンフォント・画像のアニメーション機能をご紹介しました♪

読者を装飾で楽しませる要素も大切なので、表示速度に大きな影響がない程度で活用していきましょう。

 

ps.AFFINGER5の機能紹介の旅はまだまだ続く・・・!!

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【2019最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-AFFINGER5

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.