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

産経新聞社サンスポ記者として

• Jリーグ
• プロ野球
• オリンピック
  などを担当してきた『とち』（@blue_chikippaa）です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

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

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

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

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

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

課長・中西

痩せるぞ〜！おぉ〜！

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

以下がShortcodes Ultimateで表現できるエクササイズ、いやアニメーションの全61種です。

■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

■slideInRight

■slideOutUp

■slideOutLeft

■slideOutRight

■bounceInDown

■bounceInUp

■bounceInLeft

■bounceInRight

■bounceOut

■bounceOutDown

■bounceOutUp

■bounceOutLeft

■bounceOutRight

■rotateIn

■rotateInDownLeft

■rotateInDownRight

■rotateInUpLeft

■rotateInUpRight

■rotateOut

■rotateOutDownLeft

■rotateOutDownRight

■rotateOutUpLeft

■rotateOutUpRight

■lightSpeedIn

■lightSpeedOut

■hinge

■rollIn

■rollOut

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

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

「Shortcodes Ultimate」をインストール

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

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

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

④Activate／有効化をクリック

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

「Shortcodes Ultimate」を挿入する

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

②アニメーションを選択

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

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

⑤ここは無視！（よくわからん^^;…でも影響なし）

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

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

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

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

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

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

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

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

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