こんにちは!nicoです☺
画像や文字に動きをつけて目立たせたり、おしゃれにしたいけど、JavaScriptやjQueryなんて使えない・・・。
そんな悩みはありませんか?
今回はWebの知識がなくても簡単に画像や文字に動きが付けられるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の使い方を紹介します。
こんな感じで文字や画像が動きます。
※先に動いてしまっている場合はリロードしてみてくださいね。
このプラグインを使えばとても簡単にプロが作ったようなブログや、ホームページを作ることができるのでぜひ最後まで読んでくださいね!
- 簡単に画像に動きをつけたい
- JavaScriptやjQueryの知識がない
- プロのようなブログやホームページを作りたい
- ブログにメリハリをつけたい
プラグイン「Blocks Animation」をインストールする
![プラグイン「Blocks Animation」をインストールする](https://chill-723729.com/wp-content/uploads/2022/09/plugin1-1024x431.png)
- ダッシュボード「プラグイン」
- 「新規追加」
- キーワードに「Blocks Animation」を入れて検索
- ↓このプラグインをインストールする
![Blocks Animationの画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin.png)
プラグインを「有効」にする
アニメーションを実装する
![アニメーション実装の画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin3-1024x389.jpg)
今回は画像に動きを付けます。
右下にある「Animations」をクリック
![アニメーション実装の画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin6-1024x329.jpg)
一番上の「Loading Animations」をクリック
![アニメーション実装の画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin7-1024x392.jpg)
好きな動きをつける。
- Animation・・・動きの種類
- Delay・・・その場所が表示されてから動くまでの時間
- Speed・・・アニメーションの速さ
※「Delay」と「Speed」は「Animation」を選ぶと表示されます。
一番下のボタン「Replay Animation」をクリックするとどのような動きになるか確認することができます。
![サンプル画像](https://chill-723729.com/wp-content/uploads/2022/09/toa-heftiba-W6sqUYlJRiw-unsplash-1024x683-1.jpg)
※先に動いてしまっている場合はリロードしてみてくださいね。
ちなみにこの画像は
- Animation・・・Fade in left
- Delay・・・None
- Speed・・・Slower
に設定しています。
【応用】分かれているブロックを一つにしてアニメーションを実装する
たとえば、文章の一行ずつのブロックにアニメーションを実装すると動きがバラバラになってしまうことがあります。
そんなときはアニメーションを実装したい箇所をまとめて一つにし、動きをつけましょう。
![分かれているブロックを一つにしてアニメーションを実装する](https://chill-723729.com/wp-content/uploads/2022/09/plugin9.png)
①まとめたいブロックをすべて選択し、一番右のをクリック。
②「グループ化」をクリック
![グループ化した画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin10.png)
これで一つのグループになりました。
![アニメーション実装の画像](https://chill-723729.com/wp-content/uploads/2022/09/plugin11-1024x190.png)
さきほどのようにアニメーションをカスタマイズします。
下のように文字がまとめて動いていれば成功です!
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
※先に動いてしまっている場合はリロードしてみてくださいね。
Blocks Animationのデメリット
Blocks Animationは簡単に画像や文字に動きを付けられる便利な反面、デメリットもあります。
それは、ブロックごとにしか使えないことです。
たとえば、文章の一部にだけ動きを付けるということは不可能です。
それをしたいのであれば、やはりJavaScriptやjQueryの知識が必要となります。
また、プラグイン共通で言えることですがプラグインを入れすぎるとサイト自体が重くなったり、プラグイン同士の相性が悪いとバグが起きたりすることもあるのでプラグインを使用する場合はよく考えて使うようにしましょう。
まとめ
いかがでしたか?
実はワードプレスは難しい知識がなくても、こんなおしゃれなアニメーションをつけることができます。
ぜひ試してみてくださいね!
![](https://chill-723729.com/wp-content/uploads/2022/07/illust_83-min.png)
他にもウェブデザインに関する記事を書いています。
参考にしていただければ嬉しいです!
![](https://chill-723729.com/wp-content/uploads/2022/09/在宅フリーランスとして働いている主婦が-たった3ヶ月でフリーランスになった方法を伝授-16-300x158.jpg)
![](https://chill-723729.com/wp-content/uploads/2022/09/在宅フリーランスとして働いている主婦が-たった3ヶ月でフリーランスになった方法を伝授-16-300x158.jpg)
このブログはSWELLで作っています
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
コメント