投稿日:2022年6月25日
先日、WordPressプラグイン、Lottie Player Block とLottieFiles の案内メールが届きました。
届いてから時間が経ってしまいましたが検証してみました。
Lottie Player Block
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_01.png)
▲WordPress.org からもダウンロードできます。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_02.png)
▲インストールし有効化します。
今回は投稿ページに配置してみたいと思います。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_03.png)
▲ブロックの追加 > 全てを表示 を選択するとLottie Playerがリストの最上部に表示されます。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_04.png)
▲Lottie Playerをクリックすると即座にアニメーションが表示されます。
他のアニメーションに変えてみましょう。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_10.png)
▲Lottie Files サイトにアクセスします。
フリーでもけっこうな数のアニメーションが揃っています。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_11.png)
▲使いたいアニメーションを表示させURLをコピーします。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_12.png)
▲投稿画面に戻りコピーしたURLをペーストすると即座にアニメーションが変わります。
必要に応じて表示オプションを変更しましょう。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_05.png)
▲一般設定
コントロールバーの表示やループの設定などを行います。
Pro版でしかできないこともあります。
![Lottie Player Block](https://onebitious.net/wp-content/uploads/2022/06/104_08.png)
▲Style設定
キャプションの設定はPro版でしか行えないようです。
LottieFiles
![](https://onebitious.net/wp-content/uploads/2022/06/104_14.png)
▲WordPress.org からもダウンロードできます。
![](https://onebitious.net/wp-content/uploads/2022/06/104_13.png)
▲インストールし有効化します。
![](https://onebitious.net/wp-content/uploads/2022/06/104_15.png)
▲有効化するとメニューに表示されます。
こちらは一般設定の画面です。
設定に関する和訳は下記です。
LottieFilesアカウントを他のWordPressユーザーと共有します。
LottieファイルをWordPressメディアライブラリにコピーします。
![](https://onebitious.net/wp-content/uploads/2022/06/104_16.png)
▲今回も投稿ページで試してみます。
ブロックの追加 > 全てを表示 を選択するとLottieブロックがウィジェットに表示されます。
![](https://onebitious.net/wp-content/uploads/2022/06/104_17.png)
▲Lottieブロックを配置するとアニメーションの読み込み先を聞かれます。
今回はDiscover animationをクリックします。
![](https://onebitious.net/wp-content/uploads/2022/06/104_18.png)
▲LottieFilesファイルのモーダルが開くので読み込みたいアニメーションを選択します。
![](https://onebitious.net/wp-content/uploads/2022/06/104_19.png)
▲Insert animationをクリックします。
![](https://onebitious.net/wp-content/uploads/2022/06/104_20.png)
▲ブロックに追加されるので下図の設定から任意で設定します。
![](https://onebitious.net/wp-content/uploads/2022/06/104_21.png)
![](https://onebitious.net/wp-content/uploads/2022/06/104_22.png)
▲Play animation onの項目。
Scrollもあります。
パララックスと併用すると効果がありそうですね。
これらのプラグインがなかったときにはLottieサイトからJSONをコピーしてきたりと、手間がかかることを行なってました。
おかげで、だいぶ楽になりました。
Adobe After Effectsで作ったアニメーションもLottie書き出しができるので、折を見て作成し、Lottieへ投稿したいと思います。
最後まで読んでくださりありがとうございました。