こんにちは！nicoです☺
画像や文字に動きをつけて目立たせたり、おしゃれにしたいけど、JavaScriptやjQueryなんて使えない・・・。
そんな悩みはありませんか？
今回はWebの知識がなくても簡単に画像や文字に動きが付けられるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の使い方を紹介します。
こんな感じで文字や画像が動きます。
※先に動いてしまっている場合はリロードしてみてくださいね。
このプラグインを使えばとても簡単にプロが作ったようなブログや、ホームページを作ることができるのでぜひ最後まで読んでくださいね！
- 簡単に画像に動きをつけたい
- JavaScriptやjQueryの知識がない
- プロのようなブログやホームページを作りたい
- ブログにメリハリをつけたい
プラグイン「Blocks Animation」をインストールする
- ダッシュボード「プラグイン」
- 「新規追加」
- キーワードに「Blocks Animation」を入れて検索
- ↓このプラグインをインストールする
プラグインを「有効」にする
アニメーションを実装する
今回は画像に動きを付けます。
右下にある「Animations」をクリック
一番上の「Loading Animations」をクリック
好きな動きをつける。
- Animation・・・動きの種類
- Delay・・・その場所が表示されてから動くまでの時間
- Speed・・・アニメーションの速さ
※「Delay」と「Speed」は「Animation」を選ぶと表示されます。
一番下のボタン「Replay Animation」をクリックするとどのような動きになるか確認することができます。
※先に動いてしまっている場合はリロードしてみてくださいね。
ちなみにこの画像は
- Animation・・・Fade in left
- Delay・・・None
- Speed・・・Slower
に設定しています。
【応用】分かれているブロックを一つにしてアニメーションを実装する
たとえば、文章の一行ずつのブロックにアニメーションを実装すると動きがバラバラになってしまうことがあります。
そんなときはアニメーションを実装したい箇所をまとめて一つにし、動きをつけましょう。
①まとめたいブロックをすべて選択し、一番右の
をクリック。
②「グループ化」をクリック
これで一つのグループになりました。
さきほどのようにアニメーションをカスタマイズします。
下のように文字がまとめて動いていれば成功です！
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
※先に動いてしまっている場合はリロードしてみてくださいね。
Blocks Animationのデメリット
Blocks Animationは簡単に画像や文字に動きを付けられる便利な反面、デメリットもあります。
それは、ブロックごとにしか使えないことです。
たとえば、文章の一部にだけ動きを付けるということは不可能です。
それをしたいのであれば、やはりJavaScriptやjQueryの知識が必要となります。
また、プラグイン共通で言えることですがプラグインを入れすぎるとサイト自体が重くなったり、プラグイン同士の相性が悪いとバグが起きたりすることもあるのでプラグインを使用する場合はよく考えて使うようにしましょう。
まとめ
いかがでしたか？
実はワードプレスは難しい知識がなくても、こんなおしゃれなアニメーションをつけることができます。
ぜひ試してみてくださいね！
他にもウェブデザインに関する記事を書いています。
参考にしていただければ嬉しいです！
このブログはSWELLで作っています
コメント