ブログ

【コーディングなし!】超簡単WordPressでのアニメーションの付け方

こんにちは、Yui(@yui_active)です。

今日はWordPressの便利プラグインを紹介したいと思います。

さて、急ですが、こんな悩みをもったことはありませんか??

あなた
あなた
WordPressで作ったサイトでアニメーションを付けたい・・・。
あなた
あなた
もうCSSとJava Scriptで地道に書くのは嫌だ・・・

プラグインでコードなしで実装出来るんです・・!
私が今から紹介するプラグインを使うと、

も簡単につけれるんです。

結構このプラグインが衝撃的だったので、今回はこれを紹介します。

Shortcodes Ultimateをインストールする

まずは、Shortcodes Ultimateというプラグインをインストールします。

プラグインというのは、ざっくりというとWordPressで活用できる追加機能みたいなものです。
分かる人はそのままインストールして有効化してください。

分からない人はこの手順通りにしてみてください。
まず、WordPressの管理画面のプラグインを選択。


新規追加をクリックします。


すると、検索できるので、Shortcodes Ultimateで検索します。

私の場合は既に有効化しているので写真も有効になってるんですけど、初めて使うときはインストールして有効化しないといけません。

そういうわけで、Shortcodes Ultimateを今すぐインストールして、有効化してください。

これで設定完了です♪

利用したいアニメーションを選ぶ

さて、次は利用したいアニメーションを選ぶだけです。

選び方は非常に簡単で、まず投稿ページに行きます。

すると、タイトルの上のすぐ下にショートコードを挿入とありますね。

これをクリックします。
すると、このページが開くので、真ん中少し下にあるアニメーションをクリックします。

すると、このようなページが開きます。

それぞれ順に説明しますね。

  • アニメーション→つけるアニメーションの種類
  • 持続時間→何秒間アニメーションが動くか
  • 遅延→それが目に入ってから何秒後にアニメーションが動き出すか

まず、アニメーションの種類を選ぶ必要があります。
英語でわかりにくいと思うので、最後に色々なアニメーションを載せておくので参考にしてください。

そしてそのアニメーションを何秒間動かしたいか選んで、後は目に入った瞬間動くのか、それとも少し待ってから動かすのかを設定します。

最後にそれで問題なければ挿入を押すとアニメーションが追加されます!

非常に簡単ですね!

色々なアニメーションを紹介!

それでは、今回のプラグインで使えるアニメーションを色々紹介します!
※全部はあまりにも量が多すぎるので、時間のあるときに見てみてください!

flash
bounce
shake
tada
swing
wobble
pulse
flip
flipInX
flipOutX

いろいろありますね!

その他の便利機能

そしてこのプラグインはアニメーション以外にも使えるんです!

ハイライト

 例えばこんな風にマーカーをひいたり 

カラム
えええ〜〜〜〜〜記事の途中で2つに分かれるの〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜??と、こんな風に記事の途中で2つに分けたり…。
ツールチップ

マウスを上に置くと吹き出しがでるよ

他にも色々あるので、ぜひ使ってみてくださいね!
出来るの当たり前!と思う人もいるかもしれませんが、出来る限り時間を短縮できればいいですよね♪

最後まで読んで頂きありがとうございました!

Booking.com