画像や文字に動きをつけて目立たせたり、おしゃれにしたいけど、JavaScriptやjQueryなんて使えない・・・。Blocks」の使い方を紹介します。こんな感じで文字や画像が動きます。※先に動いてしまっている場合はリロードしてみてくださいね。↓このプラグインをインストールするプラグインを「有効」にするアニメーションを実装するSTEPアニメーションを実装したい箇所をクリック今回は画像に動きを付けます。Animations」をクリック好きな動きをつける。Animation・・・動きの種類Delay・・・その場所が表示されてから動くまでの時間Speed・・・アニメーションの速さ※「Delay」と「Speed」は「Animation」を選ぶと表示されます。Animation」をクリックするとどのような動きになるか確認することができます。※先に動いてしまっている場合はリロードしてみてくださいね。leftDelay・・・NoneSpeed・・・Slowerに設定しています。【応用】分かれているブロックを一つにしてアニメーションを実装するたとえば、文章の一行ずつのブロックにアニメーションを実装すると動きがバラバラになってしまうことがあります。そんなときはアニメーションを実装したい箇所をまとめて一つにし、動きをつけましょう。STEPブロックをひとつにまとめる1まとめたいブロックをすべて選択し、一番右のをクリック。2「グループ化」をクリックこれで一つのグループになりました。STEPアニメーションを実装するさきほどのようにアニメーションをカスタマイズします。下のように文字がまとめて動いていれば成功です!サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト※先に動いてしまっている場合はリロードしてみてくださいね。Animationは簡単に画像や文字に動きを付けられる便利な反面、デメリットもあります。それは、ブロックごとにしか使えないことです。文章の一部にだけ動きを付けるということは不可能です。それをしたいのであれば、やはりJavaScriptやjQueryの知識が必要となります。プラグイン共通で言えることですがプラグインを入れすぎるとサイト自体が重くなったり、プラグイン同士の相性が悪いとバグが起きたりすることもあるのでプラグインを使用する場合はよく考えて使うようにしましょう。まとめいかがでしたか?実はワードプレスは難しい知識がなくても、こんなおしゃれなアニメーションをつけることができます。試してみてくださいね!ブログをステキに作りたい、ホームページを自分で作ってみたい、パソコンが苦手・・・という方に向けてオンラインレッスンもご用意しています。他にもウェブデザインに関する記事を書いています。こんにちは!nicoです。ワードプレスの神テーマである「SWELL」でも一部カスタマイズができない部分があるかと思います。2022年10月24日ウェブデザインのオンラインスクールって実際どうなの?スキルゼロだった体験者が辛口評価します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。video】「モダンラブ・東京~さまざまな愛の形~」あらすじ・出演者・感想まとめnicoフリーランスウェブデザイナーアラフォーのnicoです。未経験、アラフォーでウェブデザイナーへ転身しました。私の通ったスクールはこちら↓フリーランスデザイナーの暮らし、ブログカスタマイズなどについて発信しています。シングルマザー経験あり。線維筋痛症もってます。