AFFINGER6に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。
こんにちは。WordPressテーマ研究家SHINです。
AFFINGER6には、簡単にアニメーションできる機能が実装されていて、なんとデフォルトで・・・
＼\ 16種類揃っています /／ d(‘ｪ’*)ｸﾞｯｼﾞｮﾌﾞ!!
アニメーション16種類
●45°揺れ ●ベル揺れ ●横揺れ
●縦揺れ ●点滅 ●バウンド
●回転 ●ふわふわ ●大小
●シェイク ●シェイク(強)
●拡大(ゆれ) ●過ぎる ●戻る
●バースト ●落ちる
アニメーションは表現豊かでPOPに仕上がるし、テキストだけでも読者を楽しませる要素やアクセントにもなります。
今回は「テキスト(文字)」「アイコンフォント」「画像」の3種類を、16種類のアニメーションにできる機能と使い方を解説していきます。
ぜひ活用してみてください♪
テキストをアニメーションにする
まずはテキストのアニメーションにしてみましょう。と言っても簡単2ステップです♪
step
1WordPressの投稿画面を「ビジュアル」モードにし、アニメーションしたいテキスト（文字）をドラッグします。
step
2次に「スタイル」＞「アニメーション」で、好みのアニメーションを選択するだけでOK！
step
3下のように、投稿画面でテキストに「動」というマークが表示されたらOK。「プレビュー」で確認してみましょう。
アイコンフォントをアニメーションにする
続いてアイコンフォントも簡単にアニメーション化できます。
そこで、僕がおすすめするフリー素材のアイコンフォントサイトは「fontawesome v4.7」です。欲しいアイコンはほぼ揃います♪
step
1「fontawesome v4.7」にアクセスして、アニメーションにしたいアイコンフォントを選びましょう。
step
2好きなアイコンフォントを選んだら、そのアイコンをクリックして「HTMLコード」をコピーしておきましょう。
step
3WordPress投稿画面「テキスト」に、コピーしたHTMLコードを貼り付けます。これだけでアイコンフォントが表示されるので、プレビューで確認してみましょう。
step
4アイコンフォントのHTMLコードに、アニメーションにするコードを追加します。16種類のアニメーションコードを一覧してみましたので、コピペで使ってください♪(表示しているアイコンサイズは「ラージ」に変更しています)
45°揺れ
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク(強)
拡大(ゆれ)
過ぎる
戻る
バースト
落ちる
以上16種類のアニメーションでした♪
でもどうせなら・・・「アイコンサイズが小さい！」「アイコンの色も変えたい！」って方いますよね！もちろんご紹介します。
step
5アイコンサイズとアイコンカラーを変える場合、基本のHTMLコードに以下のコードを追加するだけです♪
アイコンサイズ変更
<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>
アイコンカラー変更
<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>
画像をアニメーションにする
次に画像をアニメーションしてみましょう♪
アイコンフォントのようにHTMLコード書き込む必要がないので、テキストをアニメーションするように簡単に設定できます。
step
1WordPress投稿本文に、「メディアを追加」もしくは「保存済みのメディア」から画像を挿入しましょう。
step
2画像を挿入したら、クリックした状態でスタイルにある「アニメーション」の中から好きなアニメーションを選択するだけです♪
すると・・・
となります♪インパクトあり＆見ていて楽しい装飾ですよね！
ただし！"表示速度"を考えなくてはならないので、あまり多様に使うのは注意していきましょう。
まとめ
AFFINGER6のテキスト(文字)・アイコンフォント・画像のアニメーション機能をご紹介しました♪
読者を装飾で楽しませる要素も大切なので、表示速度に大きな影響がない程度で活用していきましょう。
ps.AFFINGER6の機能紹介の旅はまだまだ続く・・・！！
AFFINGER6カスタマイズ記事
-
【AFFINGER6】フォントをカスタマイズして最適化する設定方法
WordPressテーマ「AFFINGER6」のフォント設定を完全版でお届けします。 テーマAFFINGER6を愛用しているSHINですが、先日フォントに「Noto Sans（400）」と「游明朝（5 ...
続きを見る
-
【AFFINGER6】アドセンス広告を横並び表示する方法＋αカスタマイズあり
WordPressテーマ「AFFINGER6」で設定する「Googleアドセンス広告を横並び（ダブルレクタングル）で表示する方法」を解説していきます。 こんにちは。WordPressテーマ研究家SHI ...
続きを見る
-
【2022最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選
こんにちは。WordPessテーマ研究家SHINです。 カエレバ＆ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...
続きを見る
-
【AFFINGER6】スマホフッターに固定メニューを設置する方法
こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。 スマホフッターメニューと言えば、パソコンで言う ...
続きを見る
-
【AFFINGER6】コレは使える！クリップメモのアイコンカスタマイズ集
"AFFINGER6生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。 今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...
続きを見る
