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

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

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

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

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

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

アニメーションさせるには、プラグイン「Shortcodes Ultimate」が必要になります。

まずは、「プラグイン」→「新規追加」から、検索窓に「Shortcodes Ultimate」と入力して検索してみましょう。

左上にある、赤いマークが目印のプラグインが出てきたら、「今すぐインストール」をクリックしてWordPressにインストールします。

最後に、プラグインを有効化すれば完了です。

これで準備が出来ました。

２．記事内でアニメーションさせる方法

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

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

小さい窓が出てきました。

これらを設定することで、様々なアニメーションをさせることが可能になります。

順番に説明していきます。

①アニメーション

こちらを変更することで、アニメーションの動きを変えることが出来ます。

動きのプレビューは面倒なので、全てまとめました。

後ほどアニメーションを全てご紹介するのでお楽しみに！

②持続時間

この数値を変更することで、アニメーションの持続する時間を変更出来ます。

1.5～3.0くらいまでがおすすめです。

③遅延

この数値を変更することで、スクロールで「アニメーションさせたい文字や画像が表示されてから何秒後に動かすか」という設定を変更出来ます。

あんまり遅いと、スクロールでスルーされてしまうので、0.5~2.0くらいがおすすめです。

これらを全て設定出来たら、「ショートコードを挿入」をクリックしましょう。

これで、ショートコードが挿入出来ました。

３．ショートコードの仕組み

ショートコードを挿入すると、このような文字が編集画面に表示されます。

この「文字や画像」という部分に、アニメーションさせたい文字や画像を入れることで、アニメーションさせることができます。

ちなみに、「su_animate type=”flipInX”」という部分の「””」の中の文字をアニメーションの名前に変更してもアニメーションの種類を変更することが出来ます。

また、「duration=”1.5″」の「””」の中の数値を変更すれば、アニメーションの持続時間を、「delay=”0.5″」の「””」の中の数値を変更すれば、アニメーションの遅延時間を変更することが出来ます。

４．実際のアニメーションをみてみよう

なんとアニメーションの種類は６１種類！

一つ一つ見ていくのは手間なので、今回は「バイラルガール」さんにお願いしてアニメーションの実験台になって頂きました。

それでは、バイラルガールさんよろしくお願いします。

頑張って動きます！
よろしくお願いします♪

１．flash

２．bounce

３．shake

４．tada

５．swing

６．wobble

７．pulse

８．flip

９．flipInX

１０．flipOutX

１１．flipInY

１２．flipOutY

１３．fadeIn

１４．fadeInUp

１５．fadeInDown

１６．fadeInLeft

１７．fadeInRight

１８．fadeInUpBig

１９．fadeInDownBig

２０．fadeInLeftBig

２１．fadeInRightBig

２２．fadeOut

２３．fadeOutUp

２４．fadeOutDown

２５．fadeOutLeft

２６．fadeOutRight

２７．fadeOutUpBig

２８．fadeOutDownBig

２９．fadeOutLeftBig

３０．fadeOutRightBig

３１．slideInDown

３２．slideInLeft

３３．slideInRight

３４．slideOutUp

３５．slideOutLeft

３６．slideOutRight

３７．bounceIn

３８．bounceInDown

３９．bounceInUp

４０．bounceInLeft

４１．bounceInRight

４２．bounceOut

４３．bounceOutDown

４４．bounceOutUp

４５．bounceOutLeft

４６．bounceOutRight

４７．rotateIn

４８．rotateInDownLeft

４９．rotateInDownRight

５０．rotateInUpLeft

５１．rotateInUpRight

５２．rotateOut

５３．rotateOutDownLeft

５４．rotateOutDownRight

５５．rotateOutUpLeft

５６．rotateOutUpRight

５７．lightSpeedIn

５８．lightSpeedOut

５９．hinge

６０．rollIn

６１．rollOut

５．まとめ

いかがでしたか？

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

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

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