動け動け動いてよ〜!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の文字&画像にアニメーションをつける

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

コメント待ってます!

タイトルとURLをコピーしました