土井まなぶ ネット集客クリエイター

Facebook広告講座始まりました

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

WRITER
 
文字や画像が動く







この記事を書いている人 - WRITER -
Web集客クリエーター 土井まなぶ です。美容サロン経営者でもあり、IT分野においてインハウスSEO及びアフィリエイトの著者でもある。セミナー・コンサルティング・会社や店舗のホームページ活用サポートで活動中。Web集客の相談はお気軽にどうぞ。
詳しいプロフィールはこちら

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

 

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

 

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

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

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

 

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

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

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

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

 

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

動く文字や画像

 

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

動く文字や画像

 

Shortcodes Ultimateを有効にします

 

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

動く文字や画像

 

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

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

 

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

 

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

動く文字や画像

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

動く文字や画像

 

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

動く文字と画像

 

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

 

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

動く文字と画像

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

 

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

 

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

動く文字と画像

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

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

 

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

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

動く文字と画像

 

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

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

 

①アニメーション

アニメーション

 

②持続期間

持続期間

 

③遅延

遅延

 

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

ショートコードを挿入

 

 

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

 

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

 

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

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

type=”flash
typeは、動きの部分になります。flashの部分を他のアニメーションタグ変えると動きを指定できます。
duration=”2
durationは、動いている時間の表示で2秒という指示です。10に変更すると10秒間動きます。
delay=”1
delayは、表示されてから動きだす時間で1秒です。0又は1で問題ありません。

 

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

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

 

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

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

一度動いた後、再度動かしたいときは、キーボードの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置換プラグイン」も紹介しましたが、最近は便利なプラグインがいろいろあるのであなた自身でも使って体感してみてくださいね。

 

 

 

 

検索上位表示
SEO上位表示line

無料E-book【Manabu式】インターネット検索で「見込み客」を自動的に集める方法

無駄な時間を使わず、上位表示する方法
狙ったキーワードで見込み客を集める方法
売上を上げる上位表示対策の改善策
キーワードの決め方とサイト分析の方法

などなど、

僕が実践しているノウハウをE-bookにまとめました。

検索上位表示

この記事を書いている人 - WRITER -
Web集客クリエーター 土井まなぶ です。美容サロン経営者でもあり、IT分野においてインハウスSEO及びアフィリエイトの著者でもある。セミナー・コンサルティング・会社や店舗のホームページ活用サポートで活動中。Web集客の相談はお気軽にどうぞ。
詳しいプロフィールはこちら
土井まなぶ 商業出版書籍はこちら


インハウスSEO 成功のための実践テクニック (Webマーケティングのプロテク)/ソシム
著者:土井まなぶ



副業で100万円稼ぐ! カンタン最強アフィリエイト サイトアフィリエイト編/ソシム
著者:土井まなぶ









Copyright© 土井まなぶ ネット集客クリエイター , 2018 All Rights Reserved.