使い方講座メーカー別サイトマップmenuContactRSSホームアフィリエイト【AFFINGER5使い方講座】WINGのアニメーション...おすすめテーマ【AFFINGER5使い方講座】WINGのアニメーション機能の使い方を説明しますアフィリエイトAFFINGER5(WING)に、アニメーション機能が付きました。・人の画像をふわふわ動かす・文字の一部を震わせる・爆弾のアイコンを点滅させるというような楽しい演出ですね^^こういうアニメーション機能があるのは、WordPressのテーマの中でAFFINGER5が最初だと思います。記事の中にちょっとしたアクセントを入れることによって、アフィリエイトサイトを楽しく演出することができるようになりますよ。今回は、アニメーションの設定の仕方を説明してみようと思います。★AFFINGER5の機能はこちら↓AFFINGER5のサイト作成が楽しくなる機能を紹介します>>アニメーション機能の使い方AFFINGER5のアニメーション効果は、WordPressの「投稿」から設定します。いつもの記事を書くところで、「スタイル」を設定するとアニメーションさせることができます。アニメーションの動作は、全部で16種類。45°揺れベル揺れ横揺れ縦揺れ点滅バウンド回転ふわふわ大小シェイクシェイク(強)拡大(ゆれ)過ぎる戻るバースト落ちるこれだけあれば、いろいろなシーンで使うことができますね^^1.画像をアニメーション画像をアニメーションさせる方法を説明していきます。WordPressの「投稿」からエディタ画面を出します。(エディタ画面は、いつもの記事を書く画面です。)WordPressのエディタには、ビジュアルモードとテキストモードがありますが、アニメーションの設定をするときには、ビジュアルモードにしておきます。ビジュアルモードは、上の画像の右上にある「ビジュアル」をクリックしてください。ビジュアルモードにしたら、次に画像を挿入しましょう。「メディアを追加」から、アニメーションさせたい画像を選んで、投稿に挿入します。画像が挿入されたら、大きさを変えておきます。画像はドラッグで拡大・縮小ができるので、好みの大きさに変更します。ドラッグしても縦横比は変わらないので安心ですよ。上の画像のように、挿入する画像のサイズがリアルタイムで表示されるので、他のイラストと大きさを合わせるのも簡単です。画像の大きさを調整したので、いよいよアニメーションを設定していきます。上の方に「スタイル」という項目がありますよね。(もし無ければ、ビジュアルモードになっていない可能性があります。)クリックすると、出てきたメニューの中に「アニメーション」という項目があります。その中から、好きなアニメーションを選んでクリックします。アニメーションを選択すると、画像の左下に「動」という青色のマークが付きます。このマークが付けば、アニメーションの設定は完了です。プレビューで確認してみましょう。先ほどの画像が、アニメーションしていると思います^^2.文字をアニメーションさせる先ほどは画像でしたが、今度は文字を動かしてみましょう。上と同様の手順で設定することができます。ビジュアルモードで、何か文字を入力します。ここでは、「黒目のパンダくん」にしてみました。「黒目のパンダくん」を選択しておきます。画像の時と同様に、「スタイル」から「アニメーション」を選びましょう。文字の場合は、選択した部分の文字がアニメーションします。文字は読めないと意味が無いので、ちょっと震えるくらいのアニメーションで良いと思います。使いどころが難しいのですが、アイデアしだいで面白いコンテンツができると思います。3.FontAwesomeアイコンをアニメーションFontAwesomeという文字アイコンもアニメーションさせることができます。最初に「FontAwesome」が使えるように設定が必要ですが、実はWINGでは簡単に設定できるます。FontAwesomeのアイコンは、見出しのアクセントとして使うとすごく良いですよ。Awesomeの使い方:Webアイコンフォントを使おうFontAwesomeを使う方法には2通りありますが、「CDNを使う」方法が簡単です。上のリンク先からCDNのコードをコピーしておきます。管理」→「その他」→「上級者向け」と進みます。その中に「コードの出力」というところがあるので、先ほどのコードを貼り付けてください。(上の画像のようになります)貼り付けたら、一番下に「保存」ボタンがあるので、忘れずにクリックしておきます。これで、WINGでもFontAwesomeアイコンが使えるようになりました。FontAwesomeをアニメーションさせるでは、アイコンをアニメーションさせてみましょう。文字をFontAwesomeのアイコンに変えるという感じが簡単だと思います。ビジュアルモードにしておきます。アイコンを表示させたいところに、適当に文字を書きます。ここでは、「aaa」としてみました。この「aaa」を選択しておき、先ほどと同様に、「スタイル」からアニメーションを設定します。今回は、アニメーションは「点滅」にしてみました。「aaa」の左に「動」というマークが付いていればOKです。次に、テキストモードに切り替えます。テキストモードにするときは、右上の「ビジュアル」の隣に「テキスト」っていうところがありますよね。そこをクリックすれば、テキストモードになります。テキストモードにすると、上の画像(赤枠の中)のような文字が表示されているはずです。その中に、「aaa」という部分がありますよね。そこをFontAwesomeのコードに置き換えます。上の画像のように、「aaa」だった部分にFontAwesomeのコードに変えています。今回は、爆弾のアイコンにしてみました。上の画像の青色になっている部分が、爆弾アイコンになります。←この部分プレビューしてみると、上のようになります。爆弾アイコンが表示されていて、点滅のアニメーションになっています。アニメーション機能のまとめAFFINGER5のアニメーションは、画像・文字・アイコンを動かすことができます。したアクセントとして使うケースが多いと思いますが、アイデアしだいで、いろいろな使い方ができそうです。気を付けないといけないことは、アニメーションを多用しすぎないようにすることでしょう。記事が見にくくなってしまったり、記事を読むのに気が散ってしまうようでは意味がありません。引き立て役として使うのがベストだと思います。見出しにFontAwesomeのアイコンを使って、それを揺らしたりするのは面白そうですよね^^ちょっとしたことですが、かなりのインパクトになると思います。★AFFINGER5のサイト例です↓AFFINGER5を使ったサイト事例。PACK3は、WING強化版と2つの便利なプラグインをセットにした商品です。【Diverの使い方講座】サイドバーにタブ切換の記事一覧を作成しますWordPressテーマBRIDGEの、注目・おすすめランキングの使い...TCDのWordPressテーマに乗り換える時の注意点。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL上に表示された文字を入力してください。TOPおすすめテーマ2020年、WordPressテーマの目的別おすすめベスト3を発表!おすすめテーマブログにおすすめのWordPressテーマ。クオリティーの高い有料テーマに厳選し...おすすめテーマトップページに動画再生可能な、おすすめのWordPressテーマを集めましたおすすめテーマ美容室・サロン向けの高級感あるWordPressテーマを比較してみましたおすすめテーマWordPressでネットショップが作れるおすすめテーマ【Welcart・Woo...おすすめテーマ企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】おすすめテーマ女性向けの美しい(かわいい)WordPressテーマを集めましたおすすめテーマアフィリエイトにおすすめのWordPressテーマ。