めっちゃ動くよ!CSSも知らない初心者がWordPressでアニメーションさせる方法

トップユーチューバー
無料動画講座

今回は、WordPressでCSSや特殊な知識がなくても、記事内の文章や画像をアニメーションさせる方法を解説していきます。

これが出来るだけで、他のブログと差別化が出来ます。

また、ブログ記事だけじゃなくランディングページなどにも上手く活用出来ると面白いかも知れませんね!

それでは、今回もはりきっていきましょう!

 

1.プラグイン「Shortcodes Ultimate」をインストールする

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

 

 

 

 

 

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.まとめ

いかがでしたか?

アニメーションは使いどころを間違わなければ、他のブログとの差別化が出来る素晴らしい機能です。

うまく使いこなして、あなただけの楽しいコンテンツにしていきましょう。

ありがとうございました。

トップユーチューバー

いつもシェアありがとうございます!

270万PVブロガーが教えるブログを30倍アクセスアップさせる全手法を動画講座にしちゃいました。

月間270万PVブロガーが実践している
「ブログ集客の動画講座」を
無料プレゼントすることにしました。

是非、あなたのブログ運営に
お役立てください。

可愛いキャラクターが
本物のノウハウを暴露しちゃいますよ。

今のうちにダウンロードしてくださいね。


動画講座
 

コメントを残す

ABOUTこの記事をかいた人

松本圭一郎

Webサイトの運営・集客の専門家であり、『Crescita』の管理人。ブログマーケティングが得意で、初心者は勿論、本格的にブログ運営したい個人向けにWebサイト運営・集客のアドバイスをしている。『与えて与えて与え続ける』という想いで活動中。 まだこの歳で温泉が趣味。真面目で温厚な性格だが、運動だけは続かない。そしてダイエットも続かない。痩せねば・・ッ!