“超絶簡単” WordPressサイトでアニメーションをつける方法
![](https://groovy55.net/wp-content/uploads/2020/08/8b25344251344af84ee7673132dbedd9-e1597814982491.png)
WordPressで簡単に画像や文字にアニメーションを導入することができるプラグイン「Shortcodes Ultimate」(ショートコードアルティメイト)の
・導入方法
・使い方、設定方法
を解説します。
WordPressを活用してwebサイトを構築されている方に質問です。
あなたのサイトにこんなアニメーションつけてみたいなぁって思ったことないですか?
どどぉ〜〜ん!!
とか、
![](https://groovy55.net/wp-content/uploads/2018/06/squint-518072_1920-e1597042781395.jpg)
上からぁ〜〜
こんなアクションがつくだけで、あなたのサイトがお洒落に演出できますよね。
WordPressであれば、あるプラグインを使うだけで、このアニメーションが簡単に、しかも「61種類」のパターンが使えるようになります。しかもCSSなどを編集する必要一切ナシ!誰でも簡単にあなたのサイトにアニメーションが導入できます。
そのプラグインが「Shortcodes Ultimate」です。
プラグイン「Shortcodes Ultimate」で可能なアニメーション、61種類すべて
まずはアニメーションについて全種類見てみましょう!
61種類もあるので長いですがお付き合いください。※スクロールの関係でアニメーションがうまく見れなかった場合は再読み込みしてみてくださいね。
1.flash
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
2.bounce
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
3.shake
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
4.tada
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
5.swing
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
6.wobble
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
7.pulse
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
8.flip
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
9.flipInX
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
10.flipOutX
![](https://groovy55.net/wp-content/uploads/2020/08/hedgehog-1215140_640-e1597045257241.jpg)
11.flipInY
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
12.flipOutY
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
13.fadeIn
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
14.fadeInUp
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
15.fadeInDown
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
16.fadeInLeft
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
17.fadeInRight
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
18.fadeInUpBig
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
19.fadeInDownBig
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
20.fadeInLeftBig
![](https://groovy55.net/wp-content/uploads/2020/08/butterfly-3054736_640-e1597045153595.jpg)
21.fadeInRightBig
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
22.fadeOut
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
23.fadeOutUp
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
24.fadeOutDown
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
25.fadeOutLeft
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
26.fadeOutRight
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
27.fadeOutUpBig
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
28.fadeOutDownBig
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
29.fadeOutLeftBig
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
30.fadeOutRightBig
![](https://groovy55.net/wp-content/uploads/2020/08/rabbit-1882699_640-e1597045297847.jpg)
31.slideInDown
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
32.slideInLeft
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
33.slideInRight
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
34.slideOutUp
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
35.slideOutLeft
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
36.slideOutRight
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
37.bouncein
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
38.bounceInDown
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
39.bounceInUp
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
40.bounceInLeft
![](https://groovy55.net/wp-content/uploads/2020/08/owl-3340957_640-e1597045276128.jpg)
41.bounceInRight
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
42.bounceOut
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
43.bounceOutDown
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
44.bounceOutUp
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
45.bounceOutLeft
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
46.bounceOutRight
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
47.rotateIn
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
48.rotateInDownLeft
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
49.rotateInDownRight
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
50.rotateInUpLeft
![](https://groovy55.net/wp-content/uploads/2020/08/dog-1224267_640-e1597045212515.jpg)
51.rotateInDownRight
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
52.rotateOut
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
53.rotateOutDownLeft
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
54.rotateOutDownRight
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
55.rotateOutUpLeft
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
56.rotateOutUpRight
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
57.lightSpeedIn
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
58.lightSpeedOut
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
59.hinge
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
60.rollIn
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
61.rollOut
![](https://groovy55.net/wp-content/uploads/2020/08/giraffe-614141_640-e1597045239843.jpg)
え〜っと・・・動作一覧の作成を始めて10分で後悔しましたよ。種類ありすぎて。
それだけアニメーションが充実しています。61種類あれば、あなたのイメージしていたアニメーションも、きっと見つかるのではないでしょうか。
次はプラグインの導入方法と設定方法について解説していきます。
「Shortcodes Ultimate」の導入方法と設定方法
「Shortcodes Ultimate」はプラグインなので簡単に導入することができます。
「Shortcodes Ultimate」プラグインを導入する
ダッシュボードから
![](https://groovy55.net/wp-content/uploads/2020/08/dash-e1597128558970.png)
[プラグイン] → [新規追加]をクリックし移動します。
![](https://groovy55.net/wp-content/uploads/2020/08/2adeb524956bfc8fd13187a57f2ad743.png)
検索窓があるので
![](https://groovy55.net/wp-content/uploads/2020/08/p-kensaku-e1597129299680.png)
「Shortcodes Ultimate」と入力する。そうすると検索が始まり、「Shortcodes Ultimate」が出てくる(画像の枠囲みのやつがそれ)ので、[今すぐインストール] → [有効]にします。
![](https://groovy55.net/wp-content/uploads/2020/08/yuukou-e1597129765289.png)
はい。
導入完了です!簡単すぎましたね。
なんとこれだけでアニメーションを使える準備が完了しました。
次は実際に記事内にアニメーションを導入する方法をみていきましょう。
「Shortcodes Ultimate」の設定方法
実際の画面で解説をします。[投稿] から [新規追加] を選択します。※固定ページでも使用できます。
「Shortcodes Ultimate」が正常にインストールできていれば、記事投稿画面に [ショートコードを挿入] が出てきます。まずは [ショートコードを挿入] をクリックします。
![](https://groovy55.net/wp-content/uploads/2020/08/sounyu-e1597130402596.png)
[アニメーション]をクリックします。
![](https://groovy55.net/wp-content/uploads/2020/08/d82f03c3c7cb57fe18a760e7f5634071.png)
ここからがアニメーションの設定画面です。
![](https://groovy55.net/wp-content/uploads/2020/08/91ff45c9676aec051f1ce5ddfcbd9b08.png)
アニメーション
ここからアニメーションの種類を選択します。アニメーションのリストの部分をクリックしてください。
![](https://groovy55.net/wp-content/uploads/2020/08/03a5dc4576d121ec8997e5b5faa55c3c.png)
そこから好きなアニメーションを選択します。先ほど紹介した61種類を参考に選んでみてください。
![](https://groovy55.net/wp-content/uploads/2020/08/f03e719cd90ea47eb1871726748f0719.png)
期間
アニメーションの動作する時間(秒)を調整できます。数値が大きくなればなるほど、動作時間が長くなります。
![](https://groovy55.net/wp-content/uploads/2020/08/16de3cab63c79ac05a6de21ed348a27e.png)
遅延
アニメーションが動き出す(出現する)タイミングを設定できます。数値が大きくなればなるほど、動き出し(出現)が遅延します。
![](https://groovy55.net/wp-content/uploads/2020/08/36f3ee2b3a0135a76bd57a3ac775a032.png)
[インライン] と [別の CSS クラス]
ここは何も設定しなくてOK(そのままで)です。
![](https://groovy55.net/wp-content/uploads/2020/08/edd7ddf453ed40201445af5ec25d8dc3.png)
内容
ここにアニメーションさせたい文章を入力します。
![](https://groovy55.net/wp-content/uploads/2020/08/bdfdad679c6d2367e9cff4777c574ec2.png)
そうするとこのように文章も動かすことができます。
ライブプレビュー
ライブプレビューを押すと、動作確認ができます。
プリセット
現在設定した内容をプリセットとして保存することができます。
![](https://groovy55.net/wp-content/uploads/2020/08/860d615632177691d3c6c82f214bf88d.png)
ショートコードを挿入
設定が完了したら[ショートコードを挿入]を押します。
![](https://groovy55.net/wp-content/uploads/2020/08/3c435754d4f2a5d12c66e8d10767b232.png)
編集画面ではこのような感じで表示されます。
![](https://groovy55.net/wp-content/uploads/2020/08/code.png)
これで、設定は完了です。実際にプレビューで動作を確認してみましょう。
ブロックエディタでも使用できます
「Shortcodes Ultimate」は、クラッシックエディタでも新エディタであるGutenberg(グーテンベルク)、通称ブロックエディタどちらとも使用できます。
YouTubeで丁寧な解説動画を見つけました。こちらを参考にしてみてください。
まとめ
いかがでしたか?
プラグイン「Shortcodes Ultimate」を使えば、画像や文字へ簡単にアニメーションが導入できます。
これを使えば、
- 自社サイトのTOPページ
- LP(ランディングページ)のアニメーション
- お申し込みなどのボタンにアクション
なども、簡単にアニメーションが導入できます。
ボタンの例)↓こんな感じ。
あなたのサイトにもアニメーションを簡単に導入してみましょう!
Googleマイビジネス登録代行サービス
ローカル検索に有効なGoogleマイビジネス登録代行サービスです
・登録したいけどITが苦手
・手を付ける暇がない
そんな方の為に弊社が登録代行致します