今回は、WordPressでCSSや特殊な知識がなくても、記事内の文章や画像をアニメーションさせる方法を解説していきます。
これが出来るだけで、他のブログと差別化が出来ます。
また、ブログ記事だけじゃなくランディングページなどにも上手く活用出来ると面白いかも知れませんね!
それでは、今回もはりきっていきましょう!
目 次
- 1.プラグイン「Shortcodes Ultimate」をインストールする
- 2.記事内でアニメーションさせる方法
- 3.ショートコードの仕組み
- 4.実際のアニメーションをみてみよう
- 1.flash
- 2.bounce
- 3.shake
- 4.tada
- 5.swing
- 6.wobble
- 7.pulse
- 8.flip
- 9.flipInX
- 10.flipOutX
- 11.flipInY
- 12.flipOutY
- 13.fadeIn
- 14.fadeInUp
- 15.fadeInDown
- 16.fadeInLeft
- 17.fadeInRight
- 18.fadeInUpBig
- 19.fadeInDownBig
- 20.fadeInLeftBig
- 21.fadeInRightBig
- 22.fadeOut
- 23.fadeOutUp
- 24.fadeOutDown
- 25.fadeOutLeft
- 26.fadeOutRight
- 27.fadeOutUpBig
- 28.fadeOutDownBig
- 29.fadeOutLeftBig
- 30.fadeOutRightBig
- 31.slideInDown
- 32.slideInLeft
- 33.slideInRight
- 34.slideOutUp
- 35.slideOutLeft
- 36.slideOutRight
- 37.bounceIn
- 38.bounceInDown
- 39.bounceInUp
- 40.bounceInLeft
- 41.bounceInRight
- 42.bounceOut
- 43.bounceOutDown
- 44.bounceOutUp
- 45.bounceOutLeft
- 46.bounceOutRight
- 47.rotateIn
- 48.rotateInDownLeft
- 49.rotateInDownRight
- 50.rotateInUpLeft
- 51.rotateInUpRight
- 52.rotateOut
- 53.rotateOutDownLeft
- 54.rotateOutDownRight
- 55.rotateOutUpLeft
- 56.rotateOutUpRight
- 57.lightSpeedIn
- 58.lightSpeedOut
- 59.hinge
- 60.rollIn
- 61.rollOut
- 5.まとめ
1.プラグイン「Shortcodes Ultimate」をインストールする

アニメーションさせるには、プラグイン「Shortcodes Ultimate」が必要になります。
まずは、「プラグイン」→「新規追加」から、検索窓に「Shortcodes Ultimate」と入力して検索してみましょう。

左上にある、赤いマークが目印のプラグインが出てきたら、「今すぐインストール」をクリックしてWordPressにインストールします。
最後に、プラグインを有効化すれば完了です。
これで準備が出来ました。
2.記事内でアニメーションさせる方法

「Shortcodes Ultimate」が有効化されていれば、記事の作成画面の上に「ショートコードを挿入」というボタンが表示されますので、そちらをクリックしてみましょう。

すると、このように出来ることの一覧が表示されますので、「アニメーション」をクリックします。

小さい窓が出てきました。
これらを設定することで、様々なアニメーションをさせることが可能になります。
順番に説明していきます。
①アニメーション
こちらを変更することで、アニメーションの動きを変えることが出来ます。
動きのプレビューは面倒なので、全てまとめました。
後ほどアニメーションを全てご紹介するのでお楽しみに!
②持続時間
この数値を変更することで、アニメーションの持続する時間を変更出来ます。
1.5~3.0くらいまでがおすすめです。
③遅延
この数値を変更することで、スクロールで「アニメーションさせたい文字や画像が表示されてから何秒後に動かすか」という設定を変更出来ます。
あんまり遅いと、スクロールでスルーされてしまうので、0.5~2.0くらいがおすすめです。

これらを全て設定出来たら、「ショートコードを挿入」をクリックしましょう。
これで、ショートコードが挿入出来ました。
3.ショートコードの仕組み
挿入されるショートコード
ショートコードを挿入すると、このような文字が編集画面に表示されます。
この「文字や画像」という部分に、アニメーションさせたい文字や画像を入れることで、アニメーションさせることができます。
ちなみに、「su_animate type=”flipInX”」という部分の「””」の中の文字をアニメーションの名前に変更してもアニメーションの種類を変更することが出来ます。
また、「duration=”1.5″」の「””」の中の数値を変更すれば、アニメーションの持続時間を、「delay=”0.5″」の「””」の中の数値を変更すれば、アニメーションの遅延時間を変更することが出来ます。
4.実際のアニメーションをみてみよう
なんとアニメーションの種類は61種類!
一つ一つ見ていくのは手間なので、今回は「バイラルガール」さんにお願いしてアニメーションの実験台になって頂きました。
それでは、バイラルガールさんよろしくお願いします。

よろしくお願いします♪
注意
画像下のコードはコピペして使用も可能ですが、プラグイン「Shortcodes Ultimate」をインストールしておかないと動きませんのでご注意ください。
1.flash
1 |
[su_animate type="flash" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
2.bounce
1 |
[su_animate type="bounce" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
3.shake
1 |
[su_animate type="shake" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
4.tada
1 |
[su_animate type="tada" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
5.swing
1 |
[su_animate type="swing" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
6.wobble
1 |
[su_animate type="wobble" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
7.pulse
1 |
[su_animate type="pulse" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
8.flip
1 |
[su_animate type="flip" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
9.flipInX
1 |
[su_animate type="flipInX" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
10.flipOutX
1 |
[su_animate type="flipOutX" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
11.flipInY
1 |
[su_animate type="flipInY" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
12.flipOutY
1 |
[su_animate type="flipOutY" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
13.fadeIn
1 |
[su_animate type="fadeIn" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
14.fadeInUp
1 |
[su_animate type="fadeInUp" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
15.fadeInDown
1 |
[su_animate type="fadeInDown" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
16.fadeInLeft
1 |
[su_animate type="fadeInLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
17.fadeInRight
1 |
[su_animate type="fadeInRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
18.fadeInUpBig
1 |
[su_animate type="fadeInUpBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
19.fadeInDownBig
1 |
[su_animate type="fadeInDownBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
20.fadeInLeftBig
1 |
[su_animate type="fadeInLeftBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
21.fadeInRightBig
1 |
[su_animate type="fadeInRightBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
22.fadeOut
1 |
[su_animate type="fadeOut" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
23.fadeOutUp
1 |
[su_animate type="fadeOutUp" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
24.fadeOutDown
1 |
[su_animate type="fadeOutDown" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
25.fadeOutLeft
1 |
[su_animate type="fadeOutLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
26.fadeOutRight
1 |
[su_animate type="fadeOutRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
27.fadeOutUpBig
1 |
[su_animate type="fadeOutUpBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
28.fadeOutDownBig
1 |
[su_animate type="fadeOutDownBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
29.fadeOutLeftBig
1 |
[su_animate type="fadeOutLeftBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
30.fadeOutRightBig
1 |
[su_animate type="fadeOutRightBig" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
31.slideInDown
1 |
[su_animate type="slideInDown" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
32.slideInLeft
1 |
[su_animate type="slideInLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
33.slideInRight
1 |
[su_animate type="slideInRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
34.slideOutUp
1 |
[su_animate type="slideOutUp" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
35.slideOutLeft
1 |
[su_animate type="slideOutLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
36.slideOutRight
1 |
[su_animate type="slideOutRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
37.bounceIn
1 |
[su_animate type="bounceIn" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
38.bounceInDown
1 |
[su_animate type="bounceInDown" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
39.bounceInUp
1 |
[su_animate type="bounceInUp" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
40.bounceInLeft
1 |
[su_animate type="bounceInLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
41.bounceInRight
1 |
[su_animate type="bounceInRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
42.bounceOut
1 |
[su_animate type="bounceOut" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
43.bounceOutDown
1 |
[su_animate type="bounceOutDown" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
44.bounceOutUp
1 |
[su_animate type="bounceOutUp" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
45.bounceOutLeft
1 |
[su_animate type="bounceOutLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
46.bounceOutRight
1 |
[su_animate type="bounceOutRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
47.rotateIn
1 |
[su_animate type="rotateIn" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
48.rotateInDownLeft
1 |
[su_animate type="rotateInDownLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
49.rotateInDownRight
1 |
[su_animate type="rotateInDownRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
50.rotateInUpLeft
1 |
[su_animate type="rotateInUpLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
51.rotateInUpRight
1 |
[su_animate type="rotateInUpRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
52.rotateOut
1 |
[su_animate type="rotateOut" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
53.rotateOutDownLeft
1 |
[su_animate type="rotateOutDownLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
54.rotateOutDownRight
1 |
[su_animate type="rotateOutDownRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
55.rotateOutUpLeft
1 |
[su_animate type="rotateOutUpLeft" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
56.rotateOutUpRight
1 |
[su_animate type="rotateOutUpRight" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
57.lightSpeedIn
1 |
[su_animate type="lightSpeedIn" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
58.lightSpeedOut
1 |
[su_animate type="lightSpeedOut" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
59.hinge
1 |
[su_animate type="hinge" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
60.rollIn
1 |
[su_animate type="rollIn" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
61.rollOut
1 |
[su_animate type="rollOut" duration="1.5" delay="0.5"]画像を挿入[/su_animate] |
5.まとめ
いかがでしたか?
アニメーションは使いどころを間違わなければ、他のブログとの差別化が出来る素晴らしい機能です。
うまく使いこなして、あなただけの楽しいコンテンツにしていきましょう。
ありがとうございました。
キャラクターがいろんな動きをしてくれて、とっても楽しかったです!ブログを始めたばかりなんですが、こんなキャラクターを使えるようになりたいです。どうもありがとうございました!