↑↑↑
こんな動きをするアニメーションの作り方
今回は、アニメーションのプラグインを使った動く文字・画像の表示方法です
文字や画像を動くように表示させるには、CSSを使わなくても、あなたのワードプレスサイトにShortcodes Ultimateプラグインを導入すると動きます。
プラグインを導入すると、Shortcodes Ultimateの中にある「アニメーション」が使えるようになり、文字や画像を動かすことができます。
CSSを知らない初心者の方も簡単にアニメーション表示できるのがShortcodes Ultimateです。
※このShortcodes Ultimate、他のブログやサイトと差別化ができるとはいえ、数多く使いすぎると鬱陶しいブログになりますのでご注意くださいね。
ということで、まずはプラグインの導入から解説していきます。
今回の↓「目次」長いです。ｗ
WordPressにプラグイン「Shortcodes Ultimate」をアップロードします
ワードプレス管理画面にある「プラグイン」⇒「新規追加」をクリック
次にキーワードに「Shortcodes Ultimate」と入力すると、プラグインが表示されます。
Shortcodes Ultimateを有効にします
「今すぐインストロール」をクリック後、「有効」ボタンが出てきますのでクリック。
これで、あなたのワードプレスに「Shortcodes Ultimate」が導入されました。
では、「Shortcodes Ultimate」の中にある「ショートコード」機能を使っていきましょう。
管理画面のサイドバーに表示された「ショートコード」をクリック
サイドバーのショートコードをクリックすると、アニメーションが出てきます。
「アニメーション」が表示されているか確認ください。
そのアニメーションをクリックするとショートコードタグが表示されます。
「可能な値」で表示されている部分が、動きを示すコードになります。（ここでは確認だけ）
アニメーションの種類は現在61種類あります。
（このページ記事真ん中あたりから、全種類の動きをご覧いただけるように表示しました）
ちなみに管理画面のショートコードの中にある「設定」「アドオン」は特に使うことはありません。
そのまま放置で問題ありません。
それでは早速、記事コンテンツ内での使い方を解説します。
記事コンテンツ内でアニメーションを使う
記事コンテンツ作成画面の上部に「ショートコードを挿入」ボタンがあるか確認ください。
WordPressの記事コンテンツを書く場所ですが、「ビジュアル」と「テキスト」がありますよね。
ショートコードを挿入するのは、どちらも共通になります。
記事コンテンツ作成画面の上部にある「ショートコードを挿入」をクリックします。
ショートコードがたくさんありますが、その中の下記の方に「アニメーション」という表記がありますのでクリックします。
表示されたアニメーション画面で設定を行います。
設定するところは以下の３つです。
①アニメーション
②持続期間
③遅延
さいごに「ショートコードを挿入」をクリックします。
それでは、それぞれ3つの設定部分について詳しく解説していきます。
アニメーションに挿入する文字や画像
アニメーションで使うタグになります。
※ワードプレスに「Shortcodes Ultimate」がインストールできていないと使えませんのでご注意ください。
「animate type="flash" duration="2" delay="1"] ここにテキスト文字又は画像imgタグを入れる [/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
上記のタグで、目的によって変更すると良い部分を解説します。
[aside type="boader" flat="yes"]type="flash"
typeは、動きの部分になります。flashの部分を他のアニメーションタグ変えると動きを指定できます。
[aside type="boader" flat="yes"]duration="2"
durationは、動いている時間の表示で2秒という指示です。10に変更すると10秒間動きます。
[aside type="boader" flat="yes"]delay="1"
delayは、表示されてから動きだす時間で1秒です。0又は1で問題ありません。
以上がアニメーションの設定となります。
文章で書くと長くなりますが、設定は非常にシンプルです。
それでは、61種類のアニメーションの動きをご覧ください。
ちなみにアニメーションは何度も動きません。
（動き続けるとかなり鬱陶しいかと・・・ｗ）
一度動いた後、再度動かしたいときは、キーボードのF5をクリックする（ページ再読み込み）を行っていただければ動きます。
文字や画像に動きを付けるアニメーション
flash
「animate type="flash" duration="2" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
bounce
「animate type="bounce" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
shake
「animate type="shake" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
tada
「animate type="tada" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
swing
「animate type="swing" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
wobble
「animate type="wobble" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
pulse
「animate type="pulse" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
flip
「animate type="flip" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
flipInX
animate type="flipInX" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
flipOutX
「animate type="flipOutX" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
flipInY
「animate type="flipInY" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
flipOutY
「animate type="flipOutY" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeIn
「animate type="fadeIn" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInUp
「animate type="fadeInUp" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInDown
「animate type="fadeInDown" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInLeft
「animate type="fadeInLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInRight
「animate type="fadeInRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInUpBig
「animate type="fadeInUpBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInDownBig
「animate type="fadeInDownBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInLeftBig
「animate type="fadeInLeftBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
※最初の箇所 「 を半角の [ に変更して活用ください。
fadeInRightBig
「animate type="fadeInRightBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOut
「animate type="fadeOut" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutUp
「animate type="fadeOutUp" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutDown
「animate type="fadeOutDown" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutLeft
「animate type="fadeOutLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutRight
「animate type="fadeOutRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutUpBig
「animate type="fadeOutUpBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutDownBig
「animate type="fadeOutDownBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutLeftBig
「animate type="fadeOutLeftBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
fadeOutRightBig
「animate type="fadeOutRightBig" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideInDown
「animate type="slideInDown" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideInLeft
「animate type="slideInLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideInRight
「animate type="slideInRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideOutUp
「animate type="slideOutUp" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideOutLeft
「animate type="slideOutLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
slideOutRight
「animate type="slideOutRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceIn
「animate type="bounceIn" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceInDown
「animate type="bounceInDown" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceInUp
「animate type="bounceInUp" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceInLeft
「animate type="bounceInLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceInRight
「animate type="bounceInRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceOut
「animate type="bounceOut" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceOutDown
「animate type="bounceOutDown" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceOutUp
「animate type="bounceOutUp" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceOutLeft
「animate type="bounceOutLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
bounceOutRight
「animate type="bounceOutRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateIn
「animate type="rotateIn" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateInDownLeft
「animate type="rotateInDownLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateInDownRight
「animate type="rotateInDownRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateInUpLeft
「animate type="rotateInUpLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateInUpRight
「animate type="rotateInUpRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateOut
「animate type="rotateOut" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateOutDownLeft
「animate type="rotateOutDownLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateOutDownRight
「animate type="rotateOutDownRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateOutUpLeft
「animate type="rotateOutUpLeft" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rotateOutUpRight
「animate type="rotateOutUpRight" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
lightSpeedIn
「animate type="lightSpeedIn" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
lightSpeedOut
「animate type="lightSpeedOut" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
hinge
「animate type="hinge" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rollIn
「animate type="rollIn" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
rollOut
「animate type="rollOut" duration="3" delay="1"]textタグ又は画像imgタグ[/animate]
おわり・最後に
アニメーション、いかがでしたか？
このアニメーションは、プレゼンやセミナーでよく使うパワーポイントの機能と似ていますよね。
使いつすぎると、見ている人が気分が悪くなったりすることがあるようなので、個人的には使う目的にもよると思いますが、浮き出てくる文字や画像の「fadeIn」のような動きがおすすめです。
アニメーションは演出効果はありますので、使えそうであればチャレンジしてみてはいかがでしょうか！
以前にプラグインで「Search Regexの使い方！一瞬で一括変換できる便利なWP置換プラグイン」も紹介しましたが、最近は便利なプラグインがいろいろあるのであなた自身でも使って体感してみてくださいね。
