動け動け動いてよ〜!WordPressの文字&画像にアニメーションつけてみた

動け動け動いてよ〜!WordPressの文字&画像にアニメーションをつけるアイキャッチ

[su_animate type=”wobble” duration=”4″ delay=”1″]ど〜も〜!![/su_animate]

コロナによる自粛、自粛…世の中には今、「動き」が足りない、、、。

せめて、ネットの世界ぐらいは派手に動こうよ。
ということで、文字や画像にアニメーションをつけられるWordPressプラグイン「Shortcodes Ultimate」をご紹介します。

61種類ものアニメーションがショートコードのみでつけられるので、うまく使えば読者に強烈な印象を残すことができますよ。

説明より見てもらう方が早いですね。

今回は運動不足の「課長・中西」に、がんばって動いてもらいます。

課長・中西
課長・中西

痩せるぞ〜!おぉ〜!

目次

WordPressの文字&画像にアニメーションをつける

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」の使い方

WordPressプラグイン「Shortcodes Ultimate」の使い方

では「Shortcodes Ultimate」の使い方をご紹介します。

「Shortcodes Ultimate」をインストール

①管理画面左側のプラグイン「新規追加」をクリック

プラグインをクリック

②検索窓に「Shortcodes Ultimate」と入力する

Shortcodes Ultimateと入力

③今すぐインストールをクリック

今すぐインストールをクリック

④Activate/有効化をクリック

Activate/有効化をクリック

インストールは以上です。
続いて、投稿画面にいきます。


「Shortcodes Ultimate」を挿入する

①「ショートコードを挿入」をクリック

ショートコード挿入

②アニメーションを選択

アニメーションを選択

③アニメーションの種類を選択

アニメーションの種類を選択

④動く時間と遅延(←アニメーションが始まるタイミング)を設定する

期間と遅延

⑤ここは無視!(よくわからん^^;…でも影響なし)

インライン、別のCSSクラス

⑥「内容」に動かしたい文字や画像を入れ、「ショートコードを挿入」を押したら完了!
挿入前にプレビューも見れますよ。

ショートコード挿入で終わり

[su_animate type=”wobble” duration=”4″]お疲れさまです〜[/su_animate]

画像を動かすにはimgタグ挿入

画像を動かしたければ、ショートコードの間に画像タグを入れます。

「su_animate type=”wobble” duration=”4″]画像タグ[/su_animate]

※実際のコードは最初「は[です

画像タグの挿入方法を解説します。

①使用する画像をアップします。

動くおじさん

②「︙」から「htmlとして編集」を選択

「htmlとして編集」を選択

③青の下線部分<img〜/>をコピーして、画像タグの部分に貼り付ければ完成です!

imgタグ

[su_animate type=”rotateInUpRight” duration=”4″]動くおじさん[/su_animate]

WordPressの文字&画像にアニメーションをつける

[su_animate type=”slideInDown” duration=”4″]まとめ[/su_animate]

課長、お疲れさまでした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次