【無料】めちゃオモロくてためになる『ザ・ブロガー~ブログ収益化の教科書~』詳しくはこちらをクリック!

   

遊びまくれ!ど素人でもCSSを使わずにWordPressブログにアニメーションを付ける方法

 
アイキャッチ

この記事を書いている人 - WRITER -

色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。
※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。
詳しいプロフィールはこちら 

JUNICHI

 

おっと、びっくりさせちまったかい。すまねぇな。

いきなり動いたからびっくりしたんだろ?

 

今回はな、おれみたいなプログラミングど素人でも、HTMLとかCSSとかそんなん分かんなくても簡単にアニメーションが付けられる方法を、キミに伝授してしんぜよう。

アニメーションが付けられるってだけでわくわくしねぇか?

 

 

 

 

 

 

 

 

でも今回の記事は、WordPressを使っているキミにしか使えない技なんだぜ。アメブロとかはてなブログとか使ってる人はすまねぇな。

では存分に今日の記事を楽しんでくれたまえ。

 

まずは、準備しようぜ!プラグイン『Shortcodes Ultimate』をインストールしたまえ!

ワードプレスにこ慣れているキミなら『Shortcodes Ultimate』をインストールして有効化!って言うだけで伝わるだろう。さっそくやってみてくれ。

プラグイン?なんだそれ!美味いのか!!!って意味が分かってないキミは以下の手順でプラグインをインストールしてくれ。

↓「プラグイン」の「新規追加」をクリック
カラム分割の方法1

↓右上の検索窓に『Shortcodes Ultimate』と入力してENTERキーを押すカラム分割の方法2

↓ 「Shortcodes Ultimate」というのが出てくるので、プラグインの名前が合っているか確認して『今すぐインストール』をクリック
カラム分割の方法3

↓インストールが終わったら、ちゃんと『プラグインを有効化』をクリックしておきましょう。
カラム分割の方法4

 

おっとビックリしたかい。すまねぇな、今日は時々ぶちこんでいくからそれなりに心の準備をしていてくれ。

 

 

じゃあ早速アニメーションを付ける方法を教えるぜ

信じられないだろうけど、本当にずぶの素人でもアニメーションが付けられるんだ。以下の通りにやってみてくれ。

記事の投稿の編集画面を見てみてくれ。

 

↓投稿の編集画面の「ビジュアル」と「テキスト」を切り替える近くに『ショートコードを挿入』っていうボタンが追加されているはずだ。これをクリックしてみてくれ。(※Shortcodes Ultimateっていうプラグインが必要だぜ!)
アニメーションを付ける方法1

 

↓するとこんな画面が出てくるから、『アニメーション』っていう所を選ぼう!
アニメーションを付ける方法2

 

↓次にちょっと小さめの画面が出てくる。ここでキミが付けたいアニメーションの設定ができるんだ。
アニメーションを付ける方法3

 

じゃあ順番に見てみよう。

↓ アニメーションっていう項目では、アニメーションの種類を選ぶことができる。なんとその種類61種類!!ビビるわ!あとで、ちゃんと49種類全部見せるから楽しみにしておいてくれ。
アニメーションを付ける方法4w

 

↓「持続時間」っていうのはアニメーションが動く時間を設定するところ。数字は秒数。
アニメーションを付ける方法5

 

↓「遅延」っていうのは、アニメーションを始めるまでの秒数。「2」だったらその部分が読者の目に入ってから2秒後に動き出す、という事だ。
アニメーションを付ける方法6

 

↓「インライン」と「クラス」は分からん。使わなくても十分いける。すまねぇ!アニメーションを付ける方法7

 

↓「コンテンツ」には動かしたい文字を入力しよう。文字以外をアニメーションにしたい場合は、とりあえず「あああ」でも入力しとけばOK。
アニメーションを付ける方法8

 

↓「プレビュー」ってクリックすると実際どんな動きをするかが確認できるぞ!アニメーションを付ける方法9

 

↓これでOKなら、『ショートコードを挿入』をクリック!
アニメーションを付ける方法10

 

↓そうすると、こんな感じでショートコードが本文中に入る。

 

↓そしたら、実際に公開された時にどうなるかっていうと、こうなるんだぜ。
(ちょっと止まってみてくれ)

 

 

な、簡単だろ?

 

 

 

 

ショートコードで挟まれた部分にアニメーションが付くんだぜ!

ショートコードっていうのは [] で書かれた部分のコードの事だぜ。

今回の例で言うと、「ああああ」っていう文字がsu_animate type=”flip” duration=”5″】【/su_animate】で挟まれてるのが分かるだろうか?(※ここでは【】で表現してるが、本当は[]だからな!)

分かりやすくすると以下のような感じだ。

 

文字だけじゃなくて画像などもアニメーションにできるぜ!

もちろん「ああああ」の部分に画像を入れて、ショートコードで挟んでやれば、画像にアニメーションが付くんだぜ。

su_animate type=”flip” duration=”5″】ここに画像【/su_animate】

 

ど素人でもCSSが分からなくても付けられるアニメーション61種類をご覧あれ

じゃあ、実際にどんなアニメーションが付くのか、見てもらおうか。おい、佐伯さん手伝ってくれ。

は、はい!私でしょうか。

毎年平社員の佐伯さん

アニメーションの実験台になってくれ。

1.flash

 

 

2.bounce

 

 

3.shake

 

 

4.tada

 

 

5.swing

 

 

6.wobble

 

 

7.pulse

 

 

8.flip

 

 

9.flipInX

 

 

10.flipOutX

 

 

11.flipInY

 

 

12.flipOutY

 

 

 

13.fadeIn

 

 

 

14.fadeInUp

 

 

15.fadeInDown

 

 

 

16.fadeInLeft

 

 

 

17.fadeInRight

 

 

18.fadeInUpBig

 

 

19.fadeInDownBig

 

 

20.fadeInLeftBig

 

 

21.fadeInRightBig

 

 

22.fadeOut

 

 

23.fadeOutUp

 

 

24.fadeOutDown

 

 

25.fadeOutLeft

 

 

26.fadeOutRight

 

 

27.fadeOutUpBig

 

 

 

28.fadeOutDownBig

 

 

29.fadeOutLeftBig

 

 

30.fadeOutRightBig

 

 

31.slideInDown

 

 

32.slideInLeft

 

 

33.slideInRight

 

 

34.slideOutUp

 

 

35.slideOutLeft

 

 

36.slideOutRight

 

 

 

37.bounceIn

 

 

38.bounceInDown

 

 

39.bounceInUp

 

 

40.bounceInLeft

 

 

 

41.bounceInRight

 

 

 

42.bounceOut

 

 

43.bounceOutDown

 

 

44.bounceOutUp

 

 

45.bounceOutLeft

 

 

46.bounceOutRight

 

 

47.rotateIn

 

 

48.rotateInDownLeft

 

 

49.rotateInDownRight

 

 

50.rotateInUpLeft

 

 

51.rotateInUpRight

 

 

52.rotateOut

 

 

 

53.rotateOutDownLeft

 

 

54.rotateOutDownRight

 

 

55.rotateOutUpLeft

 

 

56.rotateOutUpRight

 

 

57.lightSpeedIn

 

 

58.lightSpeedOut

 

 

59.hinge

 

60.rollIn

 

 

 

 

 

 

61.rollOut

 

 

まとめ

どうだ。すげぇプラグインだろう。

作ったヤツは本当に天才だぜ。是非キミも使ってみな!

 

 

おまけ

今回の話とは全然関係ありませんが、友人が僕をファイナルファンタジーのドット絵風にしてくれました!

FF風のJUNICHI

すごない!!??

これ、FFの大ファンの僕からしたらめちゃくちゃ嬉しいんです。ほんまに。しかも動くパターンもありますからね。

↓呪文唱えるかんじのポーズ。

呪文

 

さらに!!僕の変顔もこんな風にFF風にしてくれました!!めっちゃ嬉しい…!!

変顔

hengao

こんな素晴らしい作品を作れるなんて、相当努力されたんでしょう。彼はイラストも超美味いんです。是非彼のサイトにも遊びに行ってみて下さい!FF風のイラストも依頼したら作ってくれるみたいですよ!

【筋トレする絵師・LYOちん】筋トレをリベンジする者を応援するサイト
ソウルメイク・アーマラーLYO’s FITT

 

 

という事で今回は終わり!なんか文章のキャラが今回おかしくてすみませんでした。反省します。

>>次のページは
プラグイン『Shortcodes Ultimate』を使って本文の途中だけを簡単に2カラム・3カラムに分割する方法

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

e-book

運営者JUNICHIについて

プロフィール

株式会社ファンファーレ
代表取締役 松原 潤一

ブログマーケッターのJUNICHIです。
ブログを書いて、人に喜んでもらいながら集客までできてしまう「ブログマーケティング」を専門に扱う会社『株式会社ファンファーレ』の人です。

ほんまはふざけるのが大好き。社長になってもおもろいおっさん目指して頑張ります。

漫画を描くのも大好物。一度きりの人生、自分の「夢」を大切にしたいと思います。

⇒詳しいプロフィールはこちら

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

STORK

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。