CSSのカスタマイズ不要！！WordPressでの簡単なアニメーションの作り方　プラグイン「Shortcodes Ultimate」の紹介

2019年7月23日Message（皆様に伝えたいこと）プラグイン

 

 

（　＾ω＾）・・・

 

 

（　＾ω＾）・・・

 

 

（　＾ω＾）・・・

 

 

（　＾ω＾）・・・

 

 

（　＾ω＾）・・・

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

・・・

 

 

・・・

 

 

・・・

なんとも出だしが悪かったですね💦💦

 

 

まぁ,そ・れ・は・お・い・と・い・て

 

 

今日はブログ（Wordpress）を運営している方向けの記事を作成させていただきました。一般の方は関係ない話が多いので、つまらないかもしれませんが興味があるのでしたらどうぞ見ていってください！！

 

ブログ記事のアニメーションについて

さて、、、皆さんはブログ記事にアニメーションを入れたいと思ったことはありませんか？

 

 

・・・ありますよね？

 

 

 

・・・ありますよね？

 

 

 

・・・ありますよね？
・・・うん、あるね(⌒∇⌒)

 

 

でも、どうやって動きのあるアニメーションを作れば良いのか疑問に思っている方も多いと思います。

そこで役に立つのがプラグイン「Shortcodes Ultimate」です！！

 

プラグイン「Shortcodes Ultimate」について

「Shortcodes Ultimate」は61種類のアニメーションを搭載したプラグインです。（他にも様々な機能がありますが、今回はアニメーションだけ紹介）

 

---

 

まずはプラグインの導入！！

 

「Shortcodes Ultimate」と検索　and　インストール

 

プラグインを有効化

 

ショートコードが入っていることを確認

 

プラグインを使う際には記事を開き「ショートコードを挿入」を選択

 

沢山ある項目から「アニメーション」を選択

 

「アニメーションの選択」と「持続時間」,「遅延」の設定

 

設定が完了したら、一番下までいって「ショートコード挿入」をクリック

 

（文字テキスト）または（画像テキスト）の所にお好みの言葉や画像を入れてアニメーションを動かすことができます

 

「Shortcodes Ultimate」の61種類のアニメーション例

 

 

・flash

 

 

 

・bounce

 

 

 

・shake

 

 

 

・tade

 

 

 

・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