文字や画像が動く！WPプラグインの使い方と設定でおもいっきり遊ぼう

　↑↑↑
こんな動きをするアニメーションの作り方

 

今回は、アニメーションのプラグインを使った動く文字・画像の表示方法です

 

文字や画像を動くように表示させるには、CSSを使わなくても、あなたのワードプレスサイトにShortcodes Ultimateプラグインを導入すると動きます。

プラグインを導入すると、Shortcodes Ultimateの中にある「アニメーション」が使えるようになり、文字や画像を動かすことができます。

CSSを知らない初心者の方も簡単にアニメーション表示できるのがShortcodes Ultimateです。

 

※このShortcodes Ultimate、他のブログやサイトと差別化ができるとはいえ、数多く使いすぎると鬱陶しいブログになりますのでご注意くださいね。

ということで、まずはプラグインの導入から解説していきます。

今回の↓「目次」長いです。ｗ

WordPressにプラグイン「Shortcodes Ultimate」をアップロードします

 

ワードプレス管理画面にある「プラグイン」⇒「新規追加」をクリック

 

次にキーワードに「Shortcodes Ultimate」と入力すると、プラグインが表示されます。

 

Shortcodes Ultimateを有効にします

 

「今すぐインストロール」をクリック後、「有効」ボタンが出てきますのでクリック。

 

これで、あなたのワードプレスに「Shortcodes Ultimate」が導入されました。

では、「Shortcodes Ultimate」の中にある「ショートコード」機能を使っていきましょう。

 

管理画面のサイドバーに表示された「ショートコード」をクリック

 

サイドバーのショートコードをクリックすると、アニメーションが出てきます。

「アニメーション」が表示されているか確認ください。

 

そのアニメーションをクリックするとショートコードタグが表示されます。
「可能な値」で表示されている部分が、動きを示すコードになります。（ここでは確認だけ）

 

アニメーションの種類は現在61種類あります。
（このページ記事真ん中あたりから、全種類の動きをご覧いただけるように表示しました）

 

ちなみに管理画面のショートコードの中にある「設定」「アドオン」は特に使うことはありません。
そのまま放置で問題ありません。

それでは早速、記事コンテンツ内での使い方を解説します。

 

記事コンテンツ内でアニメーションを使う

 

記事コンテンツ作成画面の上部に「ショートコードを挿入」ボタンがあるか確認ください。

WordPressの記事コンテンツを書く場所ですが、「ビジュアル」と「テキスト」がありますよね。

ショートコードを挿入するのは、どちらも共通になります。

 

記事コンテンツ作成画面の上部にある「ショートコードを挿入」をクリックします。

ショートコードがたくさんありますが、その中の下記の方に「アニメーション」という表記がありますのでクリックします。

 

表示されたアニメーション画面で設定を行います。

設定するところは以下の３つです。

 

①アニメーション

 

②持続期間

 

③遅延

 

さいごに「ショートコードを挿入」をクリックします。

 

 

それでは、それぞれ3つの設定部分について詳しく解説していきます。

 

アニメーションに挿入する文字や画像

 

アニメーションで使うタグになります。
※ワードプレスに「Shortcodes Ultimate」がインストールできていないと使えませんのでご注意ください。

上記のタグで、目的によって変更すると良い部分を解説します。

 

以上がアニメーションの設定となります。

文章で書くと長くなりますが、設定は非常にシンプルです。

 

それでは、61種類のアニメーションの動きをご覧ください。

ちなみにアニメーションは何度も動きません。
（動き続けるとかなり鬱陶しいかと・・・ｗ）

一度動いた後、再度動かしたいときは、キーボードのF5をクリックする（ページ再読み込み）を行っていただければ動きます。

 

文字や画像に動きを付けるアニメーション

 

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

 

 

 

 

slideOutUp

 

 

 

 

slideOutLeft

 

 

 

slideOutRight

 

 

 

 

bounceIn

 

 

 

 

bounceInDown

 

 

 

 

bounceInUp

 

 

 

bounceInLeft

 

 

 

 

bounceInRight

 

 

 

 

bounceOut

 

 

 

 

bounceOutDown

 

 

 

 

bounceOutUp

 

 

 

 

bounceOutLeft

 

 

 

 

bounceOutRight

 

 

 

 

rotateIn

 

 

 

 

 

rotateInDownLeft

 

 

 

 

rotateInDownRight

 

 

 

 

rotateInUpLeft

 

 

 

 

rotateInUpRight

 

 

 

 

rotateOut

 

 

 

 

rotateOutDownLeft

 

 

 

 

rotateOutDownRight

 

 

 

 

rotateOutUpLeft

 

 

 

 

rotateOutUpRight

 

 

 

 

lightSpeedIn

 

 

 

 

lightSpeedOut

 

 

 

 

hinge

 

 

 

 

rollIn

 

 

 

 

rollOut

 

 

 

おわり・最後に

 

アニメーション、いかがでしたか？

このアニメーションは、プレゼンやセミナーでよく使うパワーポイントの機能と似ていますよね。

使いつすぎると、見ている人が気分が悪くなったりすることがあるようなので、個人的には使う目的にもよると思いますが、浮き出てくる文字や画像の「fadeIn」のような動きがおすすめです。

アニメーションは演出効果はありますので、使えそうであればチャレンジしてみてはいかがでしょうか！

以前にプラグインで「Search Regexの使い方！一瞬で一括変換できる便利なWP置換プラグイン」も紹介しましたが、最近は便利なプラグインがいろいろあるのであなた自身でも使って体感してみてくださいね。