デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

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

    
アイキャッチ
\ この記事を共有 /
遊びまくれ!ど素人でもCSSを使わずにWordPressブログにアニメー...

オッス!JUNICHIやで!

junichia

 

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

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

 

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

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

 

 

 

 

 

フッフッフッ。ハーッハッハッハッ!!

 

 

 

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

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

 

目次

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

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

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

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

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

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

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

これで準備OKだぜ!!

 

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

 

 

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

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

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

 

↓投稿の編集画面の「ビジュアル」と「テキスト」を切り替える近くに『ショートコードを挿入』っていうボタンが追加されているはずだ。これをクリックしてみてくれ。(※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】で挟まれてるのが分かるだろうか?(※ここでは【】で表現してるが、本当は[]だからな!)

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

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

ひぇぇぇぇぇぇぇぇぇ
61個完成ィィィィィィィ

佐伯さん

 

 

まとめ

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

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

 

 

おまけ

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

FF風のJUNICHI

すごない!!??

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

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

呪文

 

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

変顔

hengao

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

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

 

 

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

アディオーーーーース!

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

デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう!

\ Kindleで売れ筋トップ獲得本 / 

GA4超入門ガイドブック

プレゼント!

表紙

Comment

  1. […]  ブログマーケッターJUNICHI プラグイン『Shortcodes Ultimate』を使って本文の途中だけを簡単に2カラム・3カラムに分割する方法 64 shares 13 usershttps://junichi-manga.com/2column-3column/今回は、WordPressでブログを運営している人向けに、記事本文の途中を2カラムや3カラムに分割する方法を解説します。プラグインのShortcodes Ultimateを使えば初心者でも簡単にカラム分割をすることができます。 ブログマーケッターJUNICHI 遊びまくれ!ど素人でもCSSを使わずにWor… ブログマーケッターJUNICHI 便利なプラグイン「AddQuicktag」の使い方を知らないWordpressユーザーは人生損してるhttps://junichi-manga.com/plugin-addquicktag/WordPressには、一度登録しておいてショートコードやタグ、文章を簡単に文章中に挿入する事ができるプラグイン「AddQuicktag」というものがあります。今回は、AddQuicktagの詳しい設定方法から使い方までを解説しました。会話形式のSpeech Bubbleというプラグインと… 7つ星ブログ wordpressのプラグイン「Shortcodes Ultimate」で画像の横に文字を配置してみた! 25 shares 7 usershttp://esquared.jp/blog/plugin-of-wordpress-shortcodesultimate/最近「Shortcodes Ultimate」というプラグインにはまっています。今日はわたしが特にお気に入りの… […]

  2. […] てスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラグインを使って表示させる方法 もあるのですが、今回は、投稿記事の下にあるバイラルメディア風facebookボ […]

  3. 絵本の話~中学生になっても絵本を読んでいます~ より:

    […] JYUNICHI先生に聴いてね ☆ […]

  4. ブログを覚書として使う より:

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