[su_animate type=”wobble” duration=”4″ delay=”1″]ど〜も〜！！[/su_animate]
コロナによる自粛、自粛…世の中には今、「動き」が足りない、、、。
せめて、ネットの世界ぐらいは派手に動こうよ。
ということで、文字や画像にアニメーションをつけられるWordPressプラグイン「Shortcodes Ultimate」をご紹介します。
61種類ものアニメーションがショートコードのみでつけられるので、うまく使えば読者に強烈な印象を残すことができますよ。
説明より見てもらう方が早いですね。
今回は運動不足の「課長・中西」に、がんばって動いてもらいます。
痩せるぞ〜！おぉ〜！
WordPressの文字＆画像にアニメーションをつける
以下がShortcodes Ultimateで表現できるエクササイズ、いやアニメーションの全61種です。
■flash
[su_animate type=”flash” duration=”4″]
[/su_animate]
■bounce
[su_animate type=”bounce” duration=”4″][/su_animate]
■shake
[su_animate type=”shake” duration=”4″][/su_animate]
■tada
[su_animate type=”tada” duration=”4″][/su_animate]
■swing
[su_animate type=”swing” duration=”4″][/su_animate]
■wobble
[su_animate type=”wobble” duration=”4″][/su_animate]
■pulse
[su_animate type=”pulse” duration=”4″][/su_animate]
■flip
[su_animate type=”flip” duration=”4″][/su_animate]
■flipInX
[su_animate type=”flipInX” duration=”4″][/su_animate]
■flipOutX
[su_animate type=”flipOutX” duration=”4″][/su_animate]
■flipInY
[su_animate type=”flipInY” duration=”4″][/su_animate]
■flipOutY
[su_animate type=”flipOutY” duration=”4″][/su_animate]
■fadeIn
[su_animate type=”fadeIn” duration=”4″][/su_animate]
■fadeInUp
[su_animate type=”fadeInUp” duration=”4″][/su_animate]
■fadeInDown
[su_animate type=”fadeInDown” duration=”4″][/su_animate]
■fadeInLeft
[su_animate type=”fadeInLeft” duration=”4″][/su_animate]
■fadeInRight
[su_animate type=”fadeInRight” duration=”4″][/su_animate]
■fadeInUpBig
[su_animate type=”fadeInUpBig” duration=”4″][/su_animate]
■fadeInDownBig
[su_animate type=”fadeInDownBig” duration=”4″][/su_animate]
■fadeInLeftBig
[su_animate type=”fadeInLeftBig” duration=”4″][/su_animate]
■fadeInRightBig
[su_animate type=”fadeInRightBig” duration=”4″][/su_animate]
■fadeOut
[su_animate type=”fadeOut” duration=”4″][/su_animate]
■fadeOutUp
[su_animate type=”fadeOutUp” duration=”4″][/su_animate]
■fadeOutDown
[su_animate type=”fadeOutDown” duration=”4″][/su_animate]
■fadeOutLeft
[su_animate type=”fadeOutLeft” duration=”4″][/su_animate]
■fadeOutRight
[su_animate type=”fadeOutRight” duration=”4″][/su_animate]
■fadeOutUpBig
[su_animate type=”fadeOutUpBig” duration=”4″][/su_animate]
■fadeOutDownBig
[su_animate type=”fadeOutDownBig” duration=”4″][/su_animate]
■fadeOutLeftBig
[su_animate type=”fadeOutLeftBig” duration=”4″][/su_animate]
■fadeOutRightBig
[su_animate type=”fadeOutRightBig” duration=”4″][/su_animate]
■slideInDown
[su_animate type=”slideInDown” duration=”4″][/su_animate]
■slideInLeft
[su_animate type=”slideInLeft” duration=”4″][/su_animate]
■slideInRight
[su_animate type=”slideInRight” duration=”4″][/su_animate]
■slideInRight
[su_animate type=”slideInRight” duration=”4″][/su_animate]
■slideOutUp
[su_animate type=”slideOutUp” duration=”4″][/su_animate]
■slideOutLeft
[su_animate type=”slideOutLeft” duration=”4″][/su_animate]
■slideOutRight
[su_animate type=”slideOutRight” duration=”4″][/su_animate]
■bounceInDown
[su_animate type=”bounceInDown” duration=”4″][/su_animate]
■bounceInUp
[su_animate type=”bounceInUp” duration=”4″][/su_animate]
■bounceInLeft
[su_animate type=”bounceInLeft” duration=”4″][/su_animate]
■bounceInRight
[su_animate type=”bounceInRight” duration=”4″][/su_animate]
■bounceOut
[su_animate type=”bounceOut” duration=”4″][/su_animate]
■bounceOutDown
[su_animate type=”bounceOutDown” duration=”4″][/su_animate]
■bounceOutUp
[su_animate type=”bounceOutUp” duration=”4″][/su_animate]
■bounceOutLeft
[su_animate type=”bounceOutLeft” duration=”4″][/su_animate]
■bounceOutRight
[su_animate type=”bounceOutRight” duration=”4″][/su_animate]
■rotateIn
[su_animate type=”rotateIn” duration=”4″][/su_animate]
■rotateInDownLeft
[su_animate type=”rotateInDownLeft” duration=”4″][/su_animate]
■rotateInDownRight
[su_animate type=”rotateInDownRight” duration=”4″][/su_animate]
■rotateInUpLeft
[su_animate type=”rotateInUpLeft” duration=”4″][/su_animate]
■rotateInUpRight
[su_animate type=”rotateInUpRight” duration=”4″][/su_animate]
■rotateOut
[su_animate type=”rotateOut” duration=”4″][/su_animate]
■rotateOutDownLeft
[su_animate type=”rotateOutDownLeft” duration=”4″][/su_animate]
■rotateOutDownRight
[su_animate type=”rotateOutDownRight” duration=”4″][/su_animate]
■rotateOutUpLeft
[su_animate type=”rotateOutUpLeft” duration=”4″][/su_animate]
■rotateOutUpRight
[su_animate type=”rotateOutUpRight” duration=”4″][/su_animate]
■lightSpeedIn
[su_animate type=”lightSpeedIn” duration=”4″][/su_animate]
■lightSpeedOut
[su_animate type=”lightSpeedOut” duration=”4″][/su_animate]
■hinge
[su_animate type=”hinge” duration=”4″][/su_animate]
■rollIn
[su_animate type=”rollIn” duration=”4″][/su_animate]
■rollOut
[su_animate type=”rollOut” duration=”4″][/su_animate]
WordPressプラグイン「Shortcodes Ultimate」の使い方
では「Shortcodes Ultimate」の使い方をご紹介します。
「Shortcodes Ultimate」をインストール
①管理画面左側のプラグイン「新規追加」をクリック
②検索窓に「Shortcodes Ultimate」と入力する
③今すぐインストールをクリック
④Activate／有効化をクリック
インストールは以上です。
続いて、投稿画面にいきます。
「Shortcodes Ultimate」を挿入する
①「ショートコードを挿入」をクリック
②アニメーションを選択
③アニメーションの種類を選択
④動く時間と遅延（←アニメーションが始まるタイミング）を設定する
⑤ここは無視！（よくわからん^^;…でも影響なし）
⑥「内容」に動かしたい文字や画像を入れ、「ショートコードを挿入」を押したら完了！
挿入前にプレビューも見れますよ。
[su_animate type=”wobble” duration=”4″]お疲れさまです〜[/su_animate]
画像を動かすにはimgタグ挿入
画像を動かしたければ、ショートコードの間に画像タグを入れます。
「su_animate type=”wobble” duration=”4″]画像タグ[/su_animate]
画像タグの挿入方法を解説します。
①使用する画像をアップします。
②「︙」から「htmlとして編集」を選択
③青の下線部分<img〜/>をコピーして、画像タグの部分に貼り付ければ完成です！
[su_animate type=”rotateInUpRight” duration=”4″][/su_animate]
WordPressの文字＆画像にアニメーションをつける
[su_animate type=”slideInDown” duration=”4″]
[/su_animate]
課長、お疲れさまでした。