・
・
・
・
・
おっと、びっくりさせちまったかい。すまねぇな。
いきなり動いたからびっくりしたんだろ？
今回はな、おれみたいなプログラミングど素人でも、HTMLとかCSSとかそんなん分かんなくても簡単にアニメーションが付けられる方法を、キミに伝授してしんぜよう。
アニメーションが付けられるってだけでわくわくしねぇか？
でも今回の記事は、WordPressを使っているキミにしか使えない技なんだぜ。アメブロとかはてなブログとか使ってる人はすまねぇな。
では存分に今日の記事を楽しんでくれたまえ。
まずは、準備しようぜ！プラグイン『Shortcodes Ultimate』をインストールしたまえ！
ワードプレスにこ慣れているキミなら『Shortcodes Ultimate』をインストールして有効化！って言うだけで伝わるだろう。さっそくやってみてくれ。
プラグイン？なんだそれ！美味いのか！！！って意味が分かってないキミは以下の手順でプラグインをインストールしてくれ。
↓「プラグイン」の「新規追加」をクリック
↓右上の検索窓に『Shortcodes Ultimate』と入力してENTERキーを押す
↓ 「Shortcodes Ultimate」というのが出てくるので、プラグインの名前が合っているか確認して『今すぐインストール』をクリック
↓インストールが終わったら、ちゃんと『プラグインを有効化』をクリックしておきましょう。
おっとビックリしたかい。すまねぇな、今日は時々ぶちこんでいくからそれなりに心の準備をしていてくれ。
じゃあ早速アニメーションを付ける方法を教えるぜ
信じられないだろうけど、本当にずぶの素人でもアニメーションが付けられるんだ。以下の通りにやってみてくれ。
記事の投稿の編集画面を見てみてくれ。
↓投稿の編集画面の「ビジュアル」と「テキスト」を切り替える近くに『ショートコードを挿入』っていうボタンが追加されているはずだ。これをクリックしてみてくれ。（※Shortcodes Ultimateっていうプラグインが必要だぜ！）
↓するとこんな画面が出てくるから、『アニメーション』っていう所を選ぼう！
↓次にちょっと小さめの画面が出てくる。ここでキミが付けたいアニメーションの設定ができるんだ。
じゃあ順番に見てみよう。
↓ アニメーションっていう項目では、アニメーションの種類を選ぶことができる。なんとその種類61種類！！ビビるわ！あとで、ちゃんと49種類全部見せるから楽しみにしておいてくれ。
↓「持続時間」っていうのはアニメーションが動く時間を設定するところ。数字は秒数。
↓「遅延」っていうのは、アニメーションを始めるまでの秒数。「２」だったらその部分が読者の目に入ってから2秒後に動き出す、という事だ。
↓「インライン」と「クラス」は分からん。使わなくても十分いける。すまねぇ！
↓「コンテンツ」には動かしたい文字を入力しよう。文字以外をアニメーションにしたい場合は、とりあえず「あああ」でも入力しとけばOK。
↓「プレビュー」ってクリックすると実際どんな動きをするかが確認できるぞ！
↓これでOKなら、『ショートコードを挿入』をクリック！
↓そうすると、こんな感じでショートコードが本文中に入る。
|
1 |
[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の大ファンの僕からしたらめちゃくちゃ嬉しいんです。ほんまに。しかも動くパターンもありますからね。
↓呪文唱えるかんじのポーズ。
さらに！！僕の変顔もこんな風にＦＦ風にしてくれました！！めっちゃ嬉しい…！！
こんな素晴らしい作品を作れるなんて、相当努力されたんでしょう。彼はイラストも超美味いんです。是非彼のサイトにも遊びに行ってみて下さい！ＦＦ風のイラストも依頼したら作ってくれるみたいですよ！
【筋トレする絵師・LYOちん】筋トレをリベンジする者を応援するサイト
ソウルメイク・アーマラーLYO’s FITT
という事で今回は終わり！なんか文章のキャラが今回おかしくてすみませんでした。反省します。
>>次のページは
プラグイン『Shortcodes Ultimate』を使って本文の途中だけを簡単に2カラム・3カラムに分割する方法
