日本発NFTを紹介する「We're Japan NFT Creators!!」公開 »

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

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

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

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

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

ど〜も〜!!

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

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

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

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

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

課長・中西
課長・中西

痩せるぞ〜!おぉ〜!

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

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

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

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

「Shortcodes Ultimate」をインストール

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

プラグインをクリック

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

Shortcodes Ultimateと入力

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

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

④Activate/有効化をクリック

Activate/有効化をクリック

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


「Shortcodes Ultimate」を挿入する

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

ショートコード挿入

②アニメーションを選択

アニメーションを選択

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

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

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

期間と遅延

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

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

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

ショートコード挿入で終わり
お疲れさまです〜

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

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

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

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

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

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

動くおじさん

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

「htmlとして編集」を選択

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

imgタグ
動くおじさん

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

まとめ

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