ワードプレスでアニメーションを簡単に設定出来るプラグインと一覧表示

こんにちは!

今回は、記事内にアニメーションを簡単に表示されるプラグインを紹介します^ ^

このプラグインは、アニメーションだけじゃなく色々使えるのですが、
今回は個人的にアニメーションがたくさんあって、一覧で表示されたら便利だなと思ったので

アニメーションに絞って紹介していきたいと思います☆

簡単に記事内にアニメーションを設定出来るプラグイン

記事内にアニメーションを簡単に表示させるプラグイン『Shortcodes Ultimate』、このプラグインは
その他、色々と簡単に設定できるので是非使ってみてほしいのですが(*´∇`*)

今回は、記事内に表示させるアニメーションに絞って紹介していきたいと思います。

 

Shortcodes Ultimateの設定方法

はじめにプラグインをインストール・有効化していきます^ ^

ワードプレス管理画面の『プラグイン』より、『新規追加』でShortcodes Ultimateを検索してインストールして有効化します。

有効化するだけで設定はOKなので、後は記事作成画面で表示していきます!

 

②記事作成画面に『ショートコードを挿入』項目が追加されているので、クリックします。

 

③アニメーション以外に、設定できる事はたくさんあるので色々試してみて欲しいのですが(・∀・)

アニメーションの紹介をしていきたいと思います!

『アニメーション』を選択すると、

 

このようにアニメーションがたくさん選択できるので、設定できるアニメーションを紹介していきたいと思います^ ^

 

アニメーションの種類

 

  flash

 

点滅するアニメーションだよ〜

 

  bonuce

 

ぴこぴこ跳ねるアニメーションだよ〜

 

  shake

 

左右にゆらゆら揺れるアニメーションだよー

 

  tada

 

不規則に揺れるアニメーションだよー

 

  swing

 

剣道の竹刀みたいなアニメーションだよ〜

 

  wobble

 

激しく左右に揺れるアニメーションだよ〜

 

  pulse

 

やんわり膨らむアニメーションだよー

 

  flip

 

ぐるっと回るアニメーションだよー

 

  fliplnX

 

やんわり動きながら出てくるアニメーションだよー

 

  flipOutX

 

やんわり動きながら消えてくアニメーションだよー

 

  flipinY

 

揺れながら出てくるアニメーションだよー

 

  flipOutY

 

揺れながら消えていくアニメーションだよー

 

  fadeln

 

ふんわり出現するアニメーションだよー

 

  fadelnUp

 

上方向に出てくるアニメーションだよー

 

  fadelnDown

 

下方向に出てくるアニメーションだよー

 

  fadelnLeft

 

左から右に流れてくるアニメーションだよー

 

  fadelnRight

 

右から左に流れてくるアニメーションだよー

 

  fadelnUpBig

 

下から上に流れてくるアニメーションだよー

 

  fadelnDownBig

 

上から下に流れてくるアニメーションだよー

 

  fedelnLeftBig

 

左からビューンと出てくるアニメーションだよー

 

  fedelnRightBig

 

右からビューンと出てくるアニメーションだよー

 

  fedeOut

そのまま消えてくアニメーションだよー

 

  fedeOutUp

 

上に消えてくよーのアニメーションだよー

 

  fedeOutDown

 

下に消えてくアニメーションだよー

 

  fedeOutLeft

 

左にシュッと消えてくアニメーションだよー

 

  fedeOutRight

 

右にシュッと消えてくアニメーションだよー

 

  fedeOutUpBig

 

上にビュッと消えていくアニメーションだよー

 

  fedeOutDownBig

 

下にビュッと消えていくアニメーションだよー

 

  fedeOutLeftBig

 

左にビュッと消えていくアニメーションだよー

 

  fedeOutRightBig

 

右にビュッと消えていくアニメーションだよー

 

  slidelnDown

 

上から下に小さく動くアニメーションだよー

 

  slidelnLeft

 

左からスルッと出てくるアニメーションだよー

 

  slidelnRight

 

右からスルッと出てくるアニメーションだよー

 

  slideOutUp

 

上方向に出てきてパッと消えるアニメーションだよー

 

  slideOutLeft

 

右から左にスルッと消えてくアニメーションだよー

 

  slideOutRight

 

左から右にスルッと消えていくアニメーションだよー

 

  bounceln

 

ボヨヨーンと動くアニメーションだよー

 

  bouncelnDown

 

上から落ちてきてポンポン跳ねるアニメーションだよー

 

  bouncelnUp

 

下から出てきてポンポン跳ねるアニメーションだよー

 

  bouncelnLeft

 

左から出てきてフルフル揺れるアニメーションだよー

 

  bouncelnRight

 

右から出てきてフルフル揺れるアニメーションだよー

 

  bounceOut

 

バウンドしてスーッと来てていくアニメーションだよー

 

  bounceOutDown

 

ポンと跳ねてスーッと消えていくアニメーションだよー

 

  bounceOutUp

 

ピョーンと飛び跳ねて消えていくアニメーションだよー

 

  bounceOutLeft

 

左に飛び跳ねて消えていくアニメーションだよー

 

  bounceOutRight

 

右に飛び跳ねて消えていくアニメーションだよー

 

  rotateln

 

グルンと半回転するアニメーションだよー

 

  rotatelnDownLeft

 

右側だけグルっと動くアニメーションだよー

 

  rotatelnDownRight

 

左側だけグルっと動くアニメーションだよー

 

  rotatelnUpLeft

 

下からヒョイっと動く(右)アニメーションだよー

 

  rotatelnUpRight

 

下からヒョイっと動く(左)アニメーションだよー

 

  rotateOut

 

クルッとしながら消えていくアニメーションだよー

 

  rotateOutDownLeft

 

右側にふわっと消えていくアニメーションだよー

 

  rotateOutDownRight

 

左側にふわっと消えていくアニメーションだよー

 

  rotateOutUpLeft

 

上にふわっと消えていく(左)アニメーションだよー

 

  rotateOutUpRight

 

上にふわっと消えていく(右)アニメーションだよー

 

  lightSpeedln

 

クネクネしながら右側から出てくるアニメーションだよー

 

  lightSpeedOut

 

クネクネしながら右側に消えていくアニメーションだよー

 

  hinge

 

ブラブラぶら下がってガクンと落ちていくアニメーションだよー

 

  rollln

 

回りながらふわっと出てくるアニメーションだよー

 

  rollOut

 

クルッと消えていくアニメーションだよー

 

 

最後にまとめ

 

という事で、動き回っているページが楽しくて笑ってしまいましたが(。・ω・。)
『Shortcodes Ultimate』は、簡単に設定できるアニメーションがたくさんあって一覧で見れたら便利なのに・・・と思っていたので、やってみました^ ^

もちろん、その他の機能も便利なので是非試してみてください!